revert initial values and fix lint

lablup · Jan 1, 2025 · bd77974 · bd77974
1 parent 4b6016e
commit bd77974
Show file tree

Hide file tree

Showing 23 changed files with 165 additions and 57 deletions.
diff --git a/react/src/components/lablupTalkativotUI/ChatMessage.tsx b/react/src/components/lablupTalkativotUI/ChatMessage.tsx
@@ -2,8 +2,9 @@ import Flex from '../Flex';
 // ES 2015
 import ChatMessageContent from './ChatMessageContent';
 import { Message } from '@ai-sdk/react';
+import { Attachments } from '@ant-design/x';
 import { useThrottle } from 'ahooks';
-import { Avatar, theme } from 'antd';
+import { Avatar, theme, Image } from 'antd';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -62,8 +63,46 @@ const ChatMessage: React.FC<{
         align={placement === 'left' ? 'start' : 'end'}
         wrap="wrap"
         style={{ flex: 1 }}
-        gap={'xxs'}
+        gap={'xs'}
       >
+        {_.chain(message.experimental_attachments)
+          .filter((attachment) =>
+            _.startsWith(attachment.contentType, 'image/'),
+          )
+          .map((attachment, index) =>
+            _.includes(attachment?.contentType, 'image/') ? (
+              <Flex
+                style={{
+                  border: 'none',
+                  textAlign: 'end',
+                }}
+                align="end"
+              >
+                <Image
+                  key={`${message?.id}-${index}`}
+                  src={attachment?.url}
+                  alt={attachment?.name}
+                  style={{
+                    maxWidth: '50vw',
+                    maxHeight: '12vh',
+                    borderRadius: token.borderRadius,
+                  }}
+                />
+              </Flex>
+            ) : (
+              <Attachments.FileCard
+                key={index}
+                item={{
+                  uid: `${message?.id}-${index}`,
+                  name: attachment?.name || attachment?.url,
+                  type: attachment?.contentType,
+                  description: attachment?.name,
+                  url: attachment?.url,
+                }}
+              />
+            ),
+          )
+          .value()}
         <Flex
           align="stretch"
           direction="column"
@@ -78,27 +117,11 @@ const ChatMessage: React.FC<{
               message.role !== 'user'
                 ? token.colorBgContainer
                 : token.colorBgContainerDisabled,
-            // width: '100%',
           }}
         >
           <ChatMessageContent>
             {throttledMessageContent + (isStreaming ? '\n●' : '')}
           </ChatMessageContent>
-          <Flex>
-            {_.chain(message.experimental_attachments)
-              .filter((attachment) =>
-                _.startsWith(attachment.contentType, 'image/'),
-              )
-              .map((attachment, index) => (
-                <img
-                  key={`${message?.id}-${index}`}
-                  src={attachment?.url}
-                  alt={attachment?.name}
-                  style={{ maxWidth: '60%', maxHeight: '200px' }}
-                />
-              ))
-              .value()}
-          </Flex>
         </Flex>
         <Flex
           style={{

diff --git a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
@@ -19,6 +19,7 @@ import { useControllableValue } from 'ahooks';
 import { streamText } from 'ai';
 import {
   Alert,
+  Badge,
   Button,
   Card,
   CardProps,
@@ -161,9 +162,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [submitKey]);
 
-  // const [files, setFiles] = useState<FileList | undefined>(undefined);
   const [files, setFiles] = useState<AttachmentsProps['items']>([]);
-  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const items: MenuProps['items'] = filterEmptyItem([
     showCompareMenuItem && {
@@ -263,7 +262,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
           placeholder="Say something..."
           header={
             <Sender.Header
-              title="Attachments"
+              title={t('chatui.Attachments')}
               open={isOpenAttachments}
               onOpenChange={setIsOpenAttachments}
               styles={{
@@ -281,24 +280,25 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
                 placeholder={(type) =>
                   type === 'drop'
                     ? {
-                        title: 'Drop file here',
+                        title: t('chatui.DropFileHere'),
                       }
                     : {
                         icon: <CloudUploadOutlined />,
-                        title: 'Upload files',
-                        description:
-                          'Click or drag files to this area to upload',
+                        title: t('chatui.UploadFiles'),
+                        description: t('chatui.UploadFilesDescription'),
                       }
                 }
               />
             </Sender.Header>
           }
           prefix={
-            <Button
-              type="text"
-              icon={<LinkOutlined />}
-              onClick={() => setIsOpenAttachments(true)}
-            />
+            <Badge dot={!_.isEmpty(files) && !isOpenAttachments}>
+              <Button
+                type="text"
+                icon={<LinkOutlined />}
+                onClick={() => setIsOpenAttachments(true)}
+              />
+            </Badge>
           }
           onChange={(v: string) => {
             setInput(v);
@@ -316,9 +316,10 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
                 files,
                 (item) => item.originFileObj as File,
               );
-              const fileListArray = fileList.filter(Boolean); // `File`로 변환 후 필터링
+              // Filter after converting to `File`
+              const fileListArray = _.filter(fileList, Boolean);
               const dataTransfer = new DataTransfer();
-              fileListArray.forEach((file) => dataTransfer.items.add(file));
+              _.forEach(fileListArray, (file) => dataTransfer.items.add(file));
 
               append(
                 {
@@ -361,8 +362,8 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
           style={{ flex: 1 }}
           key={baseURL}
           initialValues={{
-            baseURL: 'https://llama-vision.asia03.app.backend.ai/v1',
-            modelId: 'Llama-3.2-11B-Vision-Instruct',
+            baseURL: baseURL,
+            token: modelToken,
           }}
         >
           {alert ? (
@@ -399,9 +400,9 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
         </Form>
       </Flex>
       {/* <ChatMessageList messages={messages}  /> */}
-      {!_.isEmpty((error as any)?.responseBody) ? (
+      {!_.isEmpty(error?.message) ? (
         <Alert
-          message={(error as any)?.responseBody}
+          message={error?.message}
           type="error"
           showIcon
           style={{

diff --git a/resources/i18n/de.json b/resources/i18n/de.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Sie sind dabei, dieses Thema zu löschen. \nEinmal gelöscht, kann es nicht wiederhergestellt werden. \nBitte gehen Sie vorsichtig vor.",
     "SelectEndpoint": "Wählen Sie Endpunkt aus",
     "SyncInput": "Eingang synchronisieren",
-    "CompareWithOtherModels": "Vergleichen Sie mit anderen Modellen"
+    "CompareWithOtherModels": "Vergleichen Sie mit anderen Modellen",
+    "Attachments": "Anhänge",
+    "DropFileHere": "Datei hier ablegen",
+    "UploadFiles": "Dateien hochladen",
+    "UploadFilesDescription": "Klicken oder ziehen Sie Dateien zum Hochladen in diesen Bereich"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Πρόκειται να διαγράψετε αυτό το θέμα. \nΑφού διαγραφεί, δεν μπορεί να ανακτηθεί. \nΠαρακαλούμε προχωρήστε με προσοχή.",
     "SelectEndpoint": "Επιλέξτε Τελικό σημείο",
     "SyncInput": "Συγχρονισμός εισόδου",
-    "CompareWithOtherModels": "Συγκρίνετε με άλλα μοντέλα"
+    "CompareWithOtherModels": "Συγκρίνετε με άλλα μοντέλα",
+    "Attachments": "Συνημμένα",
+    "DropFileHere": "Αποθέστε το αρχείο εδώ",
+    "UploadFiles": "Μεταφόρτωση αρχείων",
+    "UploadFilesDescription": "Κάντε κλικ ή σύρετε αρχεία σε αυτήν την περιοχή για μεταφόρτωση"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
@@ -1747,7 +1747,11 @@
     "DeleteChattingSession": "Delete chatting session",
     "DeleteChattingSessionDescription": "You are about to delete this topic. Once deleted, it cannot be recovered. Please proceed with caution.",
     "SyncInput": "Sync input",
-    "CompareWithOtherModels": "Compare with other models"
+    "CompareWithOtherModels": "Compare with other models",
+    "Attachments": "Attachments",
+    "DropFileHere": "Drop file here",
+    "UploadFiles": "Upload files",
+    "UploadFilesDescription": "Click or drag files to this area to upload"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/es.json b/resources/i18n/es.json
@@ -1745,7 +1745,11 @@
     "DeleteChattingSessionDescription": "Estás a punto de eliminar este tema. \nUna vez eliminado, no se puede recuperar. \nProceda con precaución.",
     "SelectEndpoint": "Seleccionar punto final",
     "SyncInput": "Entrada de sincronización",
-    "CompareWithOtherModels": "Comparar con otros modelos"
+    "CompareWithOtherModels": "Comparar con otros modelos",
+    "Attachments": "Adjuntos",
+    "DropFileHere": "Suelta el archivo aquí",
+    "UploadFiles": "Subir archivos",
+    "UploadFilesDescription": "Haga clic o arrastre archivos a esta área para cargarlos"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
@@ -1742,7 +1742,11 @@
     "DeleteChatHistory": "Poista keskusteluhistoria",
     "SelectModel": "Valitse Malli",
     "SyncInput": "Synkronoi sisääntulo",
-    "CompareWithOtherModels": "Vertaa muihin malleihin"
+    "CompareWithOtherModels": "Vertaa muihin malleihin",
+    "Attachments": "Liitteet",
+    "DropFileHere": "Pudota tiedosto tähän",
+    "UploadFiles": "Lataa tiedostoja",
+    "UploadFilesDescription": "Napsauta tai vedä tiedostoja tälle alueelle ladataksesi"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Vous êtes sur le point de supprimer ce sujet. \nUne fois supprimé, il ne peut pas être récupéré. \nVeuillez procéder avec prudence.",
     "SelectEndpoint": "Sélectionnez le point de terminaison",
     "SyncInput": "Entrée de synchronisation",
-    "CompareWithOtherModels": "Comparez avec d'autres modèles"
+    "CompareWithOtherModels": "Comparez avec d'autres modèles",
+    "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"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/id.json b/resources/i18n/id.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Anda akan menghapus topik ini. \nSetelah dihapus, itu tidak dapat dipulihkan. \nSilakan lanjutkan dengan hati-hati.",
     "SelectEndpoint": "Pilih Titik Akhir",
     "SyncInput": "Sinkronkan masukan",
-    "CompareWithOtherModels": "Bandingkan dengan model lain"
+    "CompareWithOtherModels": "Bandingkan dengan model lain",
+    "Attachments": "Lampiran",
+    "DropFileHere": "Letakkan file di sini",
+    "UploadFiles": "Unggah file",
+    "UploadFilesDescription": "Klik atau seret file ke area ini untuk diunggah"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/it.json b/resources/i18n/it.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Stai per eliminare questo argomento. \nUna volta eliminato, non può essere recuperato. \nSi prega di procedere con cautela.",
     "SelectEndpoint": "Seleziona punto finale",
     "SyncInput": "Ingresso sincronizzato",
-    "CompareWithOtherModels": "Confronta con altri modelli"
+    "CompareWithOtherModels": "Confronta con altri modelli",
+    "Attachments": "Allegati",
+    "DropFileHere": "Rilascia il file qui",
+    "UploadFiles": "Carica file",
+    "UploadFilesDescription": "Fare clic o trascinare i file in quest'area per caricarli"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "このトピックを削除しようとしています。\n一度削除すると復元することはできません。\n慎重に進めてください。",
     "SelectEndpoint": "エンドポイントの選択",
     "SyncInput": "同期入力",
-    "CompareWithOtherModels": "他モデルとの比較"
+    "CompareWithOtherModels": "他モデルとの比較",
+    "Attachments": "添付ファイル",
+    "DropFileHere": "ここにファイルをドロップします",
+    "UploadFiles": "ファイルをアップロードする",
+    "UploadFilesDescription": "ファイルをクリックまたはこの領域にドラッグしてアップロードします"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
@@ -1745,7 +1745,11 @@
     "DeleteChattingSessionDescription": "이 주제를 삭제하려고 합니다. \n삭제한 후에는 복구할 수 없습니다. \n주의해서 진행하시기 바랍니다.",
     "SelectEndpoint": "엔드포인트 선택",
     "SyncInput": "입력 연동",
-    "CompareWithOtherModels": "다른 모델과 비교하기"
+    "CompareWithOtherModels": "다른 모델과 비교하기",
+    "Attachments": "첨부파일",
+    "DropFileHere": "파일을 여기에 놓아주세요.",
+    "UploadFiles": "파일 업로드",
+    "UploadFilesDescription": "파일을 여기 끌어다 놓거나 이 영역을 클릭하세요"
   },
   "time": {
     "ms": "밀리초",

diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Та энэ сэдвийг устгах гэж байна. \nУстгасны дараа сэргээх боломжгүй. \nБолгоомжтой үргэлжлүүлнэ үү.",
     "SelectEndpoint": "Төгсгөлийн цэгийг сонгоно уу",
     "SyncInput": "Синкийн оролт",
-    "CompareWithOtherModels": "Бусад загваруудтай харьцуул"
+    "CompareWithOtherModels": "Бусад загваруудтай харьцуул",
+    "Attachments": "Хавсралтууд",
+    "DropFileHere": "Файлыг энд буулгана уу",
+    "UploadFiles": "Файлуудыг байршуулах",
+    "UploadFilesDescription": "Байршуулахын тулд файлуудыг энэ хэсэгт товшиж эсвэл чирнэ үү"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Anda akan memadamkan topik ini. \nSetelah dipadam, ia tidak boleh dipulihkan. \nSila teruskan dengan berhati-hati.",
     "SelectEndpoint": "Pilih Titik Akhir",
     "SyncInput": "Input penyegerakan",
-    "CompareWithOtherModels": "Bandingkan dengan model lain"
+    "CompareWithOtherModels": "Bandingkan dengan model lain",
+    "Attachments": "Lampiran",
+    "DropFileHere": "Lepaskan fail di sini",
+    "UploadFiles": "Muat naik fail",
+    "UploadFilesDescription": "Klik atau seret fail ke kawasan ini untuk memuat naik"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Zamierzasz usunąć ten temat. \nRaz usuniętego nie można odzyskać. \nProszę postępować ostrożnie.",
     "SelectEndpoint": "Wybierz Punkt końcowy",
     "SyncInput": "Synchronizuj wejście",
-    "CompareWithOtherModels": "Porównaj z innymi modelami"
+    "CompareWithOtherModels": "Porównaj z innymi modelami",
+    "Attachments": "Załączniki",
+    "DropFileHere": "Upuść plik tutaj",
+    "UploadFiles": "Prześlij pliki",
+    "UploadFilesDescription": "Kliknij lub przeciągnij pliki do tego obszaru, aby je przesłać"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Você está prestes a excluir este tópico. \nUma vez excluído, ele não pode ser recuperado. \nPor favor, proceda com cautela.",
     "SelectEndpoint": "Selecione o ponto final",
     "SyncInput": "Entrada de sincronização",
-    "CompareWithOtherModels": "Compare com outros modelos"
+    "CompareWithOtherModels": "Compare com outros modelos",
+    "Attachments": "Anexos",
+    "DropFileHere": "Solte o arquivo aqui",
+    "UploadFiles": "Carregar arquivos",
+    "UploadFilesDescription": "Clique ou arraste os arquivos para esta área para fazer upload"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Você está prestes a excluir este tópico. \nUma vez excluído, ele não pode ser recuperado. \nPor favor, proceda com cautela.",
     "SelectEndpoint": "Selecione o ponto final",
     "SyncInput": "Entrada de sincronização",
-    "CompareWithOtherModels": "Compare com outros modelos"
+    "CompareWithOtherModels": "Compare com outros modelos",
+    "Attachments": "Anexos",
+    "DropFileHere": "Solte o arquivo aqui",
+    "UploadFiles": "Carregar arquivos",
+    "UploadFilesDescription": "Clique ou arraste os arquivos para esta área para fazer upload"
   },
   "time": {
     "ms": "ms",

diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
@@ -1743,7 +1743,11 @@
     "DeleteChattingSessionDescription": "Вы собираетесь удалить эту тему. \nПосле удаления его невозможно восстановить. \nПожалуйста, действуйте осторожно.",
     "SelectEndpoint": "Выберите конечную точку",
     "SyncInput": "Вход синхронизации",
-    "CompareWithOtherModels": "Сравнить с другими моделями"
+    "CompareWithOtherModels": "Сравнить с другими моделями",
+    "Attachments": "Вложения",
+    "DropFileHere": "Перетащите файл сюда",
+    "UploadFiles": "Загрузить файлы",
+    "UploadFilesDescription": "Нажмите или перетащите файлы в эту область, чтобы загрузить"
   },
   "time": {
     "ms": "ms",