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

lablup · Jan 31, 2025 · 368f253 · 368f253
1 parent 445dd03
commit 368f253
Show file tree

Hide file tree

Showing 26 changed files with 157 additions and 84 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -10,6 +10,7 @@
     "baseversion",
     "cssinjs",
     "cuda",
+    "deepseek",
     "FGPU",
     "filebrowser",
     "Frgmt",
@@ -30,6 +31,7 @@
     "shmem",
     "Signout",
     "superadmin",
+    "Talkativot",
     "Tensorboard",
     "textbox",
     "Totp",
@@ -39,16 +41,7 @@
     "Warboy",
     "webcomponent",
     "webui",
-    "wsproxy",
-    "ahooks",
-    "lucide",
-    "Signout",
-    "Totp",
-    "Keypairs",
-    "Hyperaccel",
-    "Tensorboard",
-    "Automount",
-    "Talkativot"
+    "wsproxy"
   ],
   "flagWords": [
     "데이터레이크",

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/x": "^1.0.4",
@@ -23,7 +23,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.22.2",
     "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 + (isStreaming ? '\n●' : '')}
+                    </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
@@ -1714,7 +1714,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
@@ -1714,7 +1714,9 @@
     "Attachments": "Συνημμένα",
     "DropFileHere": "Αποθέστε το αρχείο εδώ",
     "UploadFiles": "Μεταφόρτωση αρχείων",
-    "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση"
+    "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση",
+    "Thinking": "Σκέψη",
+    "ViewReasoning": "Προβολή λογικής"
   },
   "time": {
     "Day": "day",

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
@@ -1715,7 +1715,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
@@ -1714,7 +1714,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
@@ -1713,7 +1713,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",