Merge pull request #485 from n4ze3m/next

1.5.4

Author: n4ze3m

docs/features/prompts.md

@@ -22,6 +22,19 @@ There are two types of custom prompts:
 
 System prompts will be set as the `system` type of prompt in the LLM. This means that the prompt will be sent to the LLM as a system prompt. This is useful for setting the context of the conversation.
 
+#### Supported System Prompt Variables
+
+You can use the following variables in your system prompts:
+
+- `{current_date_time}` - The current date and time in local format
+- `{current_year}` - The current year
+- `{current_month}` - The current month (0-11)
+- `{current_day}` - The current day of the month
+- `{current_hour}` - The current hour (0-23)
+- `{current_minute}` - The current minute (0-59)
+
+These variables will be automatically replaced with their respective values when the prompt is sent to the LLM.
+
 ### Quick Prompts
 
 Quick prompts are quick prompts that you can use to quickly send a prompt to the LLM. You can use quick prompts by clicking on the `Quick Prompts` button in the input box.

src/assets/locale/ar/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "فتح التفكير المنطقي بشكل افتراضي"
+      },
+      "userChatBubble": {
+        "label": "استخدام فقاعة الدردشة لرسائل المستخدم"
       }
     },
     "sidepanelRag": {

src/assets/locale/da/settings.json

@@ -44,6 +44,9 @@
       },
       "openReasoning": {
         "label": "Åbn Ræsonnement Sammenfoldet som standard"
+      },
+      "userChatBubble": {
+        "label": "Brug chatboble til brugermeddelelser"
       }
     },
     "sidepanelRag": {

src/assets/locale/de/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Offene Argumentation standardmäßig eingeklappt"
+      },
+      "userChatBubble": {
+        "label": "Chat-Blase für Benutzernachrichten verwenden"
       }
     },
     "sidepanelRag": {

src/assets/locale/en/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Open Reasoning Collapse by default"
+      },
+      "userChatBubble": {
+        "label": "Use Chat Bubble for User Messages"
       }
     },
     "sidepanelRag": {

src/assets/locale/es/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Abrir el Razonamiento Colapsado por defecto"
+      },
+      "userChatBubble": {
+        "label": "Usar Burbuja de Chat para Mensajes del Usuario"
       }
     },
     "sidepanelRag": {

src/assets/locale/fa/settings.json

@@ -44,6 +44,9 @@
       },
       "openReasoning": {
         "label": "باز کردن استدلال به صورت پیش فرض"
+      },
+      "userChatBubble": {
+        "label": "استفاده از حباب گفتگو برای پیام‌های کاربر"
       }
     },
     "sidepanelRag": {

src/assets/locale/fr/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Déplier par défaut le raisonnement"
+      },
+      "userChatBubble": {
+        "label": "Utiliser une bulle de discussion pour les messages de l'utilisateur"
       }
     },
     "sidepanelRag": {
@@ -392,4 +395,4 @@
     "title": "Paramètres Chrome AI"
   },
   "mermaid": "Mermaid"
-}
+}

src/assets/locale/it/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Apri il Ragionamento Compresso per impostazione predefinita"
+      },
+      "userChatBubble": {
+        "label": "Usa fumetto chat per i messaggi utente"
       }
     },
     "sidepanelRag": {

src/assets/locale/ja-JP/settings.json

@@ -50,6 +50,9 @@
       },
       "openReasoning": {
         "label": "デフォルトで推論を展開する"
+      },
+      "userChatBubble": {
+        "label": "ユーザーメッセージにチャットバブルを使用"
       }
     },
     "sidepanelRag": {

src/assets/locale/ko/settings.json

@@ -50,6 +50,9 @@
       },
       "openReasoning": {
         "label": "추론 섹션을 기본적으로 열기"
+      },
+      "userChatBubble": {
+        "label": "사용자 메시지에 채팅 버블 사용"
       }
     },
     "sidepanelRag": {

src/assets/locale/ml/settings.json

@@ -50,6 +50,9 @@
       },
       "openReasoning": {
         "label": "സ്ഥിരസ്ഥിതിയായി റീസണിംഗ് കൊളാപ്സ് തുറക്കുക"
+      },
+      "userChatBubble": {
+        "label": "ഉപയോക്തൃ സന്ദേശങ്ങൾക്കായി ചാറ്റ് ബബിൾ ഉപയോഗിക്കുക"
       }
     },
     "sidepanelRag": {

src/assets/locale/no/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Åpne Resonnement Sammenfoldet som standard"
+      },
+      "userChatBubble": {
+        "label": "Bruk chatboble for bruker meldinger"
       }
     },
     "sidepanelRag": {

src/assets/locale/pt-BR/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Abrir Raciocínio Recolhido por padrão"
+      },
+      "userChatBubble": {
+        "label": "Usar Balão de Chat para Mensagens do Usuário"
       }
     },
     "sidepanelRag": {

src/assets/locale/ru/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Открыть рассуждения свернутыми по умолчанию"
+      },
+      "userChatBubble": {
+        "label": "Использовать пузырь чата для сообщений пользователя"
       }
     },
     "sidepanelRag": {

src/assets/locale/sv/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Öppna resonemang kollapsat som standard"
+      },
+      "userChatBubble": {
+        "label": "Använd chattbubbla för användarmeddelanden"
       }
     },
     "sidepanelRag": {

src/assets/locale/uk/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "Розгорнути міркування за замовчуванням"
+      },
+      "userChatBubble": {
+        "label": "Використовувати бульбашку чату для повідомлень користувача"
       }
     },
     "sidepanelRag": {

src/assets/locale/zh-TW/settings.json

@@ -47,6 +47,9 @@
       },
       "openReasoning": {
         "label": "預設展開推理過程"
+      },
+      "userChatBubble": {
+        "label": "使用對話泡泡顯示使用者訊息"
       }
     },
     "sidepanelRag": {

src/assets/locale/zh/settings.json

@@ -50,6 +50,9 @@
       },
       "openReasoning": {
         "label": "默认展开推理过程"
+      },
+      "userChatBubble": {
+        "label": "使用聊天气泡显示用户消息"
       }
     },
     "sidepanelRag": {

src/components/Common/Playground/Message.tsx

@@ -4,7 +4,6 @@ import { Tag, Image, Tooltip, Collapse, Popover, Avatar } from "antd"
 import { WebSearch } from "./WebSearch"
 import {
   CheckIcon,
-  ClipboardIcon,
   CopyIcon,
   InfoIcon,
   Pen,
@@ -22,6 +21,7 @@ import { GenerationInfo } from "./GenerationInfo"
 import { parseReasoning } from "@/libs/reasoning"
 import { humanizeMilliseconds } from "@/utils/humanize-milliseconds"
 import { useStorage } from "@plasmohq/storage/hook"
+import { PlaygroundUserMessageBubble } from "./PlaygroundUserMessage"
 type Props = {
   message: string
   message_type?: string
@@ -54,9 +54,15 @@ export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
   const [editMode, setEditMode] = React.useState(false)
   const [checkWideMode] = useStorage("checkWideMode", false)
+  const [isUserChatBubble] = useStorage("userChatBubble", true)
 
   const { t } = useTranslation("common")
   const { cancel, isSpeaking, speak } = useTTS()
+
+  if (isUserChatBubble && !props.isBot) {
+    return <PlaygroundUserMessageBubble {...props} />
+  }
+
   return (
     <div
       className={`group relative flex w-full max-w-3xl flex-col items-end justify-center pb-2 md:px-4 lg:w-4/5 text-gray-800 dark:text-gray-100 ${checkWideMode ? "max-w-none" : ""}`}>
@@ -247,29 +253,28 @@ export const PlaygroundMessage = (props: Props) => {
                   </button>
                 </Tooltip>
               )}
+              {!props.hideCopy && (
+                <Tooltip title={t("copyToClipboard")}>
+                  <button
+                    aria-label={t("copyToClipboard")}
+                    onClick={() => {
+                      navigator.clipboard.writeText(props.message)
+                      setIsBtnPressed(true)
+                      setTimeout(() => {
+                        setIsBtnPressed(false)
+                      }, 2000)
+                    }}
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    {!isBtnPressed ? (
+                      <CopyIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                    ) : (
+                      <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+                    )}
+                  </button>
+                </Tooltip>
+              )}
               {props.isBot && (
                 <>
-                  {!props.hideCopy && (
-                    <Tooltip title={t("copyToClipboard")}>
-                      <button
-                        aria-label={t("copyToClipboard")}
-                        onClick={() => {
-                          navigator.clipboard.writeText(props.message)
-                          setIsBtnPressed(true)
-                          setTimeout(() => {
-                            setIsBtnPressed(false)
-                          }, 2000)
-                        }}
-                        className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                        {!isBtnPressed ? (
-                          <CopyIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
-                        ) : (
-                          <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
-                        )}
-                      </button>
-                    </Tooltip>
-                  )}
-
                   {props.generationInfo && (
                     <Popover
                       content={