feat(FR-433): wrap customTags contents with Collapse

lablup · Feb 14, 2025 · b1e64f7 · b1e64f7
1 parent a279ce9
commit b1e64f7
Show file tree

Hide file tree

Showing 26 changed files with 150 additions and 68 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -11,6 +11,7 @@
     "cooldown",
     "cssinjs",
     "cuda",
+    "deepseek",
     "FGPU",
     "filebrowser",
     "Frgmt",

diff --git a/react/package.json b/react/package.json
@@ -3,8 +3,8 @@
   "version": "24.09.0-alpha.1",
   "private": true,
   "dependencies": {
-    "@ai-sdk/openai": "^1.0.11",
-    "@ai-sdk/react": "^1.0.7",
+    "@ai-sdk/openai": "^1.1.5",
+    "@ai-sdk/react": "^1.1.7",
     "@ant-design/cssinjs": "^1.22.0",
     "@ant-design/icons": "^5.5.1",
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
@@ -19,7 +19,7 @@
     "@uiw/codemirror-extensions-langs": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "ahooks": "^3.8.1",
-    "ai": "^4.0.22",
+    "ai": "^4.1.13",
     "ansi_up": "^6.0.2",
     "antd": "^5.23.3",
     "antd-style": "^3.7.1",

diff --git a/react/pnpm-lock.yaml b/react/pnpm-lock.yaml
diff --git a/react/src/components/lablupTalkativotUI/ChatMessage.tsx b/react/src/components/lablupTalkativotUI/ChatMessage.tsx
@@ -4,13 +4,14 @@ import ChatMessageContent from './ChatMessageContent';
 import { Message } from '@ai-sdk/react';
 import { Attachments } from '@ant-design/x';
 import { useThrottle } from 'ahooks';
-import { Avatar, theme, Image } from 'antd';
+import { Avatar, theme, Image, Collapse, Typography, Spin } from 'antd';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import _ from 'lodash';
 import React from 'react';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(relativeTime);
@@ -32,8 +33,12 @@ const ChatMessage: React.FC<{
   isStreaming,
 }) => {
   const { token } = theme.useToken();
+  const { t } = useTranslation();
   const [isHovered, setIsHovered] = useState(false);
 
+  const throttledMessageReasoning = useThrottle(message.reasoning, {
+    wait: 50,
+  });
   const throttledMessageContent = useThrottle(message.content, { wait: 50 });
 
   return (
@@ -113,8 +118,37 @@ const ChatMessage: React.FC<{
                 ? token.colorBgContainer
                 : token.colorBgContainerDisabled,
             maxWidth: '100%',
+            width: _.trim(message.reasoning) ? '100%' : 'auto',
           }}
         >
+          {_.trim(message.reasoning) && (
+            <Collapse
+              style={{
+                marginTop: token.margin,
+                width: '100%',
+              }}
+              items={[
+                {
+                  key: 'reasoning',
+                  label: _.isEmpty(throttledMessageContent) ? (
+                    <Flex gap="xs">
+                      <Typography.Text>{t('chatui.Thinking')}</Typography.Text>
+                      <Spin size="small" />
+                    </Flex>
+                  ) : (
+                    <Typography.Text>
+                      {t('chatui.ViewReasoning')}
+                    </Typography.Text>
+                  ),
+                  children: (
+                    <ChatMessageContent>
+                      {throttledMessageReasoning}
+                    </ChatMessageContent>
+                  ),
+                },
+              ]}
+            />
+          )}
           <ChatMessageContent>
             {throttledMessageContent + (isStreaming ? '\n●' : '')}
           </ChatMessageContent>

diff --git a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
@@ -18,7 +18,7 @@ import {
 } from '@ant-design/icons';
 import { Attachments, AttachmentsProps, Sender } from '@ant-design/x';
 import { useControllableValue } from 'ahooks';
-import { streamText } from 'ai';
+import { streamText, extractReasoningMiddleware, wrapLanguageModel } from 'ai';
 import {
   Alert,
   Badge,
@@ -132,17 +132,22 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
               ? customModelFormRef.current?.getFieldValue('token')
               : apiKey) || 'dummy',
         });
-        const result = await streamText({
+        const result = streamText({
           abortSignal: init?.signal || undefined,
-          model: provider(
-            allowCustomModel
-              ? customModelFormRef.current?.getFieldValue('modelId')
-              : modelId,
-          ),
+          model: wrapLanguageModel({
+            model: provider(
+              allowCustomModel
+                ? customModelFormRef.current?.getFieldValue('modelId')
+                : modelId,
+            ),
+            middleware: extractReasoningMiddleware({ tagName: 'think' }),
+          }),
           messages: body?.messages,
         });
         setStartTime(Date.now());
-        return result.toDataStreamResponse();
+        return result.toDataStreamResponse({
+          sendReasoning: true,
+        });
       } else {
         return fetch(input, init);
       }

diff --git a/resources/i18n/de.json b/resources/i18n/de.json
@@ -1722,7 +1722,9 @@
     "Attachments": "Anhänge",
     "DropFileHere": "Datei hier ablegen",
     "UploadFiles": "Dateien hochladen",
-    "UploadFilesDescription": "Klicken oder ziehen Sie Dateien zum Hochladen in diesen Bereich"
+    "UploadFilesDescription": "Klicken oder ziehen Sie Dateien zum Hochladen in diesen Bereich",
+    "Thinking": "Denken",
+    "ViewReasoning": "Argumentation anzeigen"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -1722,7 +1722,9 @@
     "Attachments": "Συνημμένα",
     "DropFileHere": "Αποθέστε το αρχείο εδώ",
     "UploadFiles": "Μεταφόρτωση αρχείων",
-    "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση"
+    "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση",
+    "Thinking": "Σκέψη",
+    "ViewReasoning": "Προβολή λογικής"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
@@ -1726,7 +1726,9 @@
     "Attachments": "Attachments",
     "DropFileHere": "Drop file here",
     "UploadFiles": "Upload files",
-    "UploadFilesDescription": "Click or drag files to this area to upload"
+    "UploadFilesDescription": "Click or drag files to this area to upload",
+    "Thinking": "Thinking",
+    "ViewReasoning": "View reasoning"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/es.json b/resources/i18n/es.json
@@ -1722,7 +1722,9 @@
     "Attachments": "Adjuntos",
     "DropFileHere": "Suelta el archivo aquí",
     "UploadFiles": "Subir archivos",
-    "UploadFilesDescription": "Haga clic o arrastre archivos a esta área para cargarlos"
+    "UploadFilesDescription": "Haga clic o arrastre archivos a esta área para cargarlos",
+    "Thinking": "Pensamiento",
+    "ViewReasoning": "Ver razonamiento"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
@@ -1721,7 +1721,9 @@
     "Attachments": "Liitteet",
     "DropFileHere": "Pudota tiedosto tähän",
     "UploadFiles": "Lataa tiedostoja",
-    "UploadFilesDescription": "Napsauta tai vedä tiedostoja tälle alueelle ladataksesi"
+    "UploadFilesDescription": "Napsauta tai vedä tiedostoja tälle alueelle ladataksesi",
+    "Thinking": "Ajattelu",
+    "ViewReasoning": "Näytä päättely"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
@@ -1722,7 +1722,9 @@
     "Attachments": "Pièces jointes",
     "DropFileHere": "Déposez le fichier ici",
     "UploadFiles": "Télécharger des fichiers",
-    "UploadFilesDescription": "Cliquez ou faites glisser les fichiers vers cette zone pour les télécharger"
+    "UploadFilesDescription": "Cliquez ou faites glisser les fichiers vers cette zone pour les télécharger",
+    "Thinking": "Pensée",
+    "ViewReasoning": "Voir le raisonnement"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/id.json b/resources/i18n/id.json
@@ -1722,7 +1722,9 @@
     "Attachments": "Lampiran",
     "DropFileHere": "Letakkan file di sini",
     "UploadFiles": "Unggah file",
-    "UploadFilesDescription": "Klik atau seret file ke area ini untuk diunggah"
+    "UploadFilesDescription": "Klik atau seret file ke area ini untuk diunggah",
+    "Thinking": "Pemikiran",
+    "ViewReasoning": "Lihat alasan"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/it.json b/resources/i18n/it.json
@@ -1720,7 +1720,9 @@
     "Attachments": "Allegati",
     "DropFileHere": "Rilascia il file qui",
     "UploadFiles": "Carica file",
-    "UploadFilesDescription": "Fare clic o trascinare i file in quest'area per caricarli"
+    "UploadFilesDescription": "Fare clic o trascinare i file in quest'area per caricarli",
+    "Thinking": "Pensiero",
+    "ViewReasoning": "Visualizzare il ragionamento"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
@@ -1722,7 +1722,9 @@
     "Attachments": "添付ファイル",
     "DropFileHere": "ここにファイルをドロップします",
     "UploadFiles": "ファイルをアップロードする",
-    "UploadFilesDescription": "ファイルをクリックまたはこの領域にドラッグしてアップロードします"
+    "UploadFilesDescription": "ファイルをクリックまたはこの領域にドラッグしてアップロードします",
+    "Thinking": "考え",
+    "ViewReasoning": "推論を見る"
   },
   "time": {
     "Day": "日",

diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
@@ -1724,7 +1724,9 @@
     "Attachments": "첨부파일",
     "DropFileHere": "파일을 여기에 놓아주세요.",
     "UploadFiles": "파일 업로드",
-    "UploadFilesDescription": "파일을 여기 끌어다 놓거나 이 영역을 클릭하세요"
+    "UploadFilesDescription": "파일을 여기 끌어다 놓거나 이 영역을 클릭하세요",
+    "Thinking": "추론중",
+    "ViewReasoning": "추론 결과 보기"
   },
   "time": {
     "Day": "일",