Merge pull request #305 from n4ze3m/next

v1.4.4

Author: n4ze3m

.gitignore

@@ -45,4 +45,4 @@ keys.json
 # WXT
 .wxt
 # WebStorm
-.idea 
+.idea 

bun.lockb

@@ -58,6 +58,7 @@
     "remark-math": "5.1.1",
     "tesseract.js": "^5.1.1",
     "turndown": "^7.1.3",
+    "unist-util-visit": "^5.0.0",
     "yt-transcript": "^0.0.2",
     "zustand": "^4.5.0"
   },

package.json

@@ -125,5 +125,9 @@
     "pin": "تثبيت",
     "unpin": "إلغاء التثبيت",
     "generationInfo": "معلومات التوليد",
-    "sidebarChat": "دردشة الشريط الجانبي"
+    "sidebarChat": "دردشة الشريط الجانبي",
+    "reasoning": {
+        "thinking": "جاري التفكير....",
+        "thought": "فكر لمدة {{time}}"
+    }
 }

src/assets/locale/ar/common.json

@@ -118,5 +118,9 @@
     "pin": "Fastgør",
     "unpin": "Frigør",
     "generationInfo": "Genererings Info",
-    "sidebarChat": "Sidepanel Chat"
+    "sidebarChat": "Sidepanel Chat",
+    "reasoning": {
+        "thinking": "Tænker....",
+        "thought": "Tænkte i {{time}}"
+    }
 }

src/assets/locale/da/common.json

@@ -118,5 +118,9 @@
     "pin": "Anheften",
     "unpin": "Losheften",
     "generationInfo": "Generierungsinformationen",
-    "sidebarChat": "Seitenleisten-Chat"
+    "sidebarChat": "Seitenleisten-Chat",
+    "reasoning": {
+        "thinking": "Denke nach....",
+        "thought": "Gedanke für {{time}}"
+    }
 }

src/assets/locale/de/common.json

@@ -152,5 +152,9 @@
     "pin": "Pin",
     "unpin": "Unpin",
     "generationInfo": "Generation Info",
-    "sidebarChat": "Sidebar Chat"
+    "sidebarChat": "Sidebar Chat",
+    "reasoning": {
+        "thinking": "Thinking....",
+        "thought": "Thought for {{time}}"
+    }
 }

src/assets/locale/en/common.json

@@ -117,5 +117,9 @@
     "pin": "Fijar",
     "unpin": "Desfijar",
     "generationInfo": "Información de Generación",
-    "sidebarChat": "Chat lateral"
+    "sidebarChat": "Chat lateral",
+    "reasoning": {
+        "thinking": "Pensando....",
+        "thought": "Pensamiento por {{time}}"
+    }
 }

src/assets/locale/es/common.json

@@ -111,5 +111,9 @@
     "pin": "پین کردن",
     "unpin": "حذف پین",
     "generationInfo": "اطلاعات تولید",
-    "sidebarChat": "چت کناری"
+    "sidebarChat": "چت کناری",
+    "reasoning": {
+        "thinking": "در حال فکر کردن....",
+        "thought": "فکر کردن برای {{time}}"
+    }
 }

src/assets/locale/fa/common.json

@@ -117,5 +117,9 @@
     "pin": "Épingler",
     "unpin": "Désépingler",
     "generationInfo": "Informations de génération",
-    "sidebarChat": "Chat latéral"
+    "sidebarChat": "Chat latéral",
+    "reasoning": {
+        "thinking": "Réflexion....",
+        "thought": "Réflexion pendant {{time}}"
+    }
 }

src/assets/locale/fr/common.json

@@ -117,5 +117,9 @@
     "pin": "Fissa",
     "unpin": "Rimuovi",
     "generationInfo": "Informazioni sulla Generazione",
-    "sidebarChat": "Chat Laterale"
+    "sidebarChat": "Chat Laterale",
+    "reasoning": {
+        "thinking": "Pensando....",
+        "thought": "Pensato per {{time}}"
+    }
 }

src/assets/locale/it/common.json

@@ -117,5 +117,9 @@
   "pin": "固定",
   "unpin": "固定解除",
   "generationInfo": "生成情報",
-  "sidebarChat": "サイドバーチャット"
+  "sidebarChat": "サイドバーチャット",
+  "reasoning": {
+      "thinking": "考え中....",
+      "thought": "{{time}}の思考"
+  }
 }

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

@@ -117,5 +117,9 @@
   "pin": "고정",
   "unpin": "고정 해제",
   "generationInfo": "생성 정보",
-  "sidebarChat": "사이드바 채팅"
+  "sidebarChat": "사이드바 채팅",
+  "reasoning": {
+      "thinking": "생각 중....",
+      "thought": "{{time}} 동안 생각함"
+  }
 }

src/assets/locale/ko/common.json

@@ -116,6 +116,9 @@
     "pin": "പിൻ ചെയ്യുക",
     "unpin": "അൺപിൻ ചെയ്യുക",
     "generationInfo": "ജനറേഷൻ വിവരങ്ങൾ",
-    "sidebarChat": "സൈഡ്ബാർ ചാറ്റ്"
-
+    "sidebarChat": "സൈഡ്ബാർ ചാറ്റ്",
+    "reasoning": {
+        "thinking": "ചിന്തിക്കുന്നു....",
+        "thought": "{{time}} നേരത്തെ ചിന്ത"
+    }
 }

src/assets/locale/ml/common.json

@@ -118,5 +118,9 @@
     "pin": "Fest",
     "unpin": "Løsne",
     "generationInfo": "Generasjonsinformasjon",
-    "sidebarChat": "Sidepanel-chat"
+    "sidebarChat": "Sidepanel-chat",
+    "reasoning": {
+        "thinking": "Tenker....",
+        "thought": "Tenkte i {{time}}"
+    }
 }

src/assets/locale/no/common.json

@@ -117,5 +117,9 @@
   "pin": "Fixar",
   "unpin": "Desafixar",
   "generationInfo": "Informações de Geração",
-  "sidebarChat": "Chat Lateral"
+  "sidebarChat": "Chat Lateral",
+  "reasoning": {
+      "thinking": "Pensando....",
+      "thought": "Pensou por {{time}}"
+  }
 }

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

@@ -117,5 +117,9 @@
     "pin": "Закрепить",
     "unpin": "Открепить",
     "generationInfo": "Информация о генерации",
-    "sidebarChat": "Боковой чат"
+    "sidebarChat": "Боковой чат",
+    "reasoning": {
+        "thinking": "Размышляю...",
+        "thought": "Размышлял {{time}}"
+    }
 }

src/assets/locale/ru/common.json

@@ -122,5 +122,9 @@
     "pin": "Fäst",
     "unpin": "Ta bort fäst",
     "generationInfo": "Generationsinformation",
-    "sidebarChat": "Sidofältschatt"
+    "sidebarChat": "Sidofältschatt",
+    "reasoning": {
+        "thinking": "Tänker....",
+        "thought": "Tänkte i {{time}}"
+    }
 }

src/assets/locale/sv/common.json

@@ -122,5 +122,9 @@
     "pin": "Прикріпити",
     "unpin": "Відкріпити",
     "generationInfo": "Інформація про генерацію",
-    "sidebarChat": "Бічний чат"
+    "sidebarChat": "Бічний чат",
+    "reasoning": {
+        "thinking": "Думаю....",
+        "thought": "Думав протягом {{time}}"
+    }
 }

src/assets/locale/uk/common.json

@@ -117,5 +117,9 @@
     "pin": "置顶",
     "unpin": "取消置顶",
     "generationInfo": "生成信息",
-    "sidebarChat": "侧边栏聊天"
+    "sidebarChat": "侧边栏聊天",
+    "reasoning": {
+        "thinking": "思考中....",
+        "thought": "思考了 {{time}}"
+    }
 }

src/assets/locale/zh/common.json

@@ -18,7 +18,8 @@ import { useTTS } from "@/hooks/useTTS"
 import { tagColors } from "@/utils/color"
 import { removeModelSuffix } from "@/db/models"
 import { GenerationInfo } from "./GenerationInfo"
-
+import { parseReasoning } from "@/libs/reasoning"
+import { humanizeMilliseconds } from "@/utils/humanize-miliseconds"
 type Props = {
   message: string
   message_type?: string
@@ -40,6 +41,8 @@ type Props = {
   onSourceClick?: (source: any) => void
   isTTSEnabled?: boolean
   generationInfo?: any
+  isStreaming: boolean
+  reasoningTimeTaken?: number
 }
 
 export const PlaygroundMessage = (props: Props) => {
@@ -48,7 +51,6 @@ export const PlaygroundMessage = (props: Props) => {
 
   const { t } = useTranslation("common")
   const { cancel, isSpeaking, speak } = useTTS()
-
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
       <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl  flex lg:px-0 m-auto w-full">
@@ -94,7 +96,40 @@ export const PlaygroundMessage = (props: Props) => {
             <div className="flex flex-grow flex-col">
               {!editMode ? (
                 props.isBot ? (
-                  <Markdown message={props.message} />
+                  <>
+                    {parseReasoning(props.message).map((e, i) => {
+                      if (e.type === "reasoning") {
+                        return (
+                          <Collapse
+                            key={i}
+                            className="border-none !mb-3"
+                            items={[
+                              {
+                                key: "reasoning",
+                                label:
+                                  props.isStreaming && e?.reasoning_running ? (
+                                    <div className="flex items-center gap-2">
+                                      <span className="italic">
+                                        {t("reasoning.thinking")}
+                                      </span>
+                                    </div>
+                                  ) : (
+                                    t("reasoning.thought", {
+                                      time: humanizeMilliseconds(
+                                        props.reasoningTimeTaken
+                                      )
+                                    })
+                                  ),
+                                children: <Markdown message={e.content} />
+                              }
+                            ]}
+                          />
+                        )
+                      }
+
+                      return <Markdown key={i} message={e.content} />
+                    })}
+                  </>
                 ) : (
                   <p
                     className={`prose dark:prose-invert whitespace-pre-line	 prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
@@ -220,8 +255,8 @@ export const PlaygroundMessage = (props: Props) => {
                         }
                         title={t("generationInfo")}>
                         <button
-                        aria-label={t("generationInfo")}
-                        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">
+                          aria-label={t("generationInfo")}
+                          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">
                           <InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                         </button>
                       </Popover>
@@ -231,7 +266,7 @@ export const PlaygroundMessage = (props: Props) => {
                       props.currentMessageIndex === props.totalMessages - 1 && (
                         <Tooltip title={t("regenerate")}>
                           <button
-                            aria-label={t("regenerate")}  
+                            aria-label={t("regenerate")}
                             onClick={props.onRengerate}
                             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">
                             <RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />

src/components/Common/Playground/Message.tsx

@@ -16,21 +16,25 @@ import { SaveButton } from "../SaveButton"
 export const AdvanceOllamaSettings = () => {
   const [form] = Form.useForm()
   const watchUrlRewriteEnabled = Form.useWatch("urlRewriteEnabled", form)
+  const { t } = useTranslation("settings")
 
   const fetchAdvancedData = async () => {
+   try {
     const [urlRewriteEnabled, rewriteUrl, headers] = await Promise.all([
       isUrlRewriteEnabled(),
       getRewriteUrl(),
       customOllamaHeaders()
     ])
     form.setFieldsValue({ urlRewriteEnabled, rewriteUrl, headers })
+   } catch (e) {
+    console.error(e)
+   }
   }
 
   React.useEffect(() => {
     fetchAdvancedData()
   }, [])
 
-  const { t } = useTranslation("settings")
 
   return (
     <Form

src/components/Common/Settings/AdvanceOllamaSettings.tsx

@@ -120,20 +120,30 @@ export const Header: React.FC<Props> = ({
           {"/"}
         </span>
         <div className="hidden lg:block">
-          <PageAssistSelect
+          <Select
             className="w-80"
             placeholder={t("common:selectAModel")}
-            loadingText={t("common:selectAModel")}
+            // loadingText={t("common:selectAModel")}
             value={selectedModel}
             onChange={(e) => {
-              setSelectedModel(e.value)
-              localStorage.setItem("selectedModel", e.value)
+              setSelectedModel(e)
+              localStorage.setItem("selectedModel", e)
+            }}
+            filterOption={(input, option) => {
+              //@ts-ignore
+              return (
+                option?.label?.props["data-title"]
+                  ?.toLowerCase()
+                  ?.indexOf(input.toLowerCase()) >= 0
+              )
             }}
-            isLoading={isModelsLoading}
+            showSearch
+            loading={isModelsLoading}
             options={models?.map((model) => ({
               label: (
                 <span
                   key={model.model}
+                  data-title={model.name}
                   className="flex flex-row gap-3 items-center ">
                   <ProviderIcons
                     provider={model?.provider}
@@ -144,9 +154,10 @@ export const Header: React.FC<Props> = ({
               ),
               value: model.model
             }))}
-            onRefresh={() => {
-              refetch()
-            }}
+            size="large"
+            // onRefresh={() => {
+            //   refetch()
+            // }}
           />
         </div>
         <div className="lg:hidden">

src/components/Layouts/Header.tsx

@@ -122,7 +122,6 @@ const generateChatImage = async (messages: Message[]) => {
   })
 
   canvas.height = totalHeight
-  console.log(totalHeight)
 
   ctx.fillStyle = "#ffffff"
   ctx.fillRect(0, 0, canvas.width, canvas.height)