feat: Add feature to reset chat and set non-LLM models to custom (#2554)

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/lablupTalkativotUI/ChatInput.tsx

@@ -1,23 +1,32 @@
 import { Button, Input, Space } from 'antd';
-import { InputProps, TextAreaProps } from 'antd/es/input';
-import { SendIcon, SquareIcon, StopCircleIcon } from 'lucide-react';
-import React from 'react';
+import { InputProps, InputRef } from 'antd/es/input';
+import { SendIcon, SquareIcon } from 'lucide-react';
+import React, { useRef, useEffect } from 'react';
 
-const { TextArea } = Input;
 const { Compact } = Space;
 
 interface ChatInputProps extends InputProps {
   loading?: boolean;
+  autoFocus?: boolean;
   onClickStop?: () => void;
   onClickSubmit?: () => void;
 }
 const ChatInput: React.FC<ChatInputProps> = ({
   style,
   loading,
+  autoFocus,
   onClickStop,
   onClickSubmit,
   ...inputProps
 }) => {
+  const inputRef = useRef<InputRef>(null);
+
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+
   return (
     <Compact
       style={{
@@ -26,6 +35,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
       }}
     >
       <Input
+        ref={inputRef}
         {...inputProps}
         onPressEnter={(e) => {
           if (!loading) {

react/src/components/lablupTalkativotUI/ChatMessage.tsx

@@ -75,6 +75,7 @@ const ChatMessage: React.FC<{
               message.role !== 'user'
                 ? token.colorBgContainer
                 : token.colorBgContainerDisabled,
+            width: '100%',
           }}
         >
           <ChatMessageContent>

react/src/components/lablupTalkativotUI/ChatUIModal.tsx

@@ -1,11 +1,10 @@
 import { useTanQuery } from '../../hooks/reactQueryAlias';
-import BAIModal from '../BAIModal';
 import Flex from '../Flex';
 import LLMChatCard from './LLMChatCard';
-import { GetProp, Modal, ModalProps, Skeleton } from 'antd';
+import { Alert, Modal, ModalProps, Skeleton, theme } from 'antd';
 import _ from 'lodash';
-import { min } from 'lodash';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface ChatUIBasicProps {
   endpoint?: string;
@@ -20,12 +19,13 @@ const ChatUIModal: React.FC<ChatUIModalProps> = ({
   // models,
   ...props
 }) => {
+  const { token } = theme.useToken();
   return (
     <Modal
       {...props}
       styles={{
         body: {
-          height: 500,
+          height: '80vh',
           display: 'flex',
         },
         content: {
@@ -34,6 +34,8 @@ const ChatUIModal: React.FC<ChatUIModalProps> = ({
       }}
       footer={null}
       centered
+      width={'80%'}
+      style={{ maxWidth: token.screenLGMax }}
     >
       <Flex direction="column" align="stretch" style={{ flex: 1 }}>
         <EndpointChatContent basePath={basePath} endpoint={endpoint} />
@@ -46,9 +48,10 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
   basePath = 'v1',
   endpoint,
 }) => {
+  const { t } = useTranslation();
   const {
     data: ModelsResult,
-    error,
+    // error,
     isFetching,
   } = useTanQuery<{
     data: Array<Model>;
@@ -73,6 +76,17 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
       }))}
       fetchOnClient
       style={{ flex: 1 }}
+      allowManualModel={_.isEmpty(ModelsResult?.data)}
+      alert={
+        _.isEmpty(ModelsResult?.data) && (
+          <Alert
+            type="warning"
+            showIcon
+            message={t('chatui.CannotFindModel')}
+          />
+        )
+      }
+      modelId={ModelsResult?.data?.[0].id ?? 'custom'}
     />
   );
 };

react/src/components/lablupTalkativotUI/LLMChatCard.tsx

@@ -5,11 +5,23 @@ import ChatInput from './ChatInput';
 import VirtualChatMessageList from './VirtualChatMessageList';
 import { createOpenAI } from '@ai-sdk/openai';
 import { useChat } from '@ai-sdk/react';
+import { DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { useControllableValue } from 'ahooks';
 import { streamText } from 'ai';
-import { Card, CardProps, Form, Input, Select, theme } from 'antd';
+import {
+  Button,
+  Card,
+  CardProps,
+  Dropdown,
+  Form,
+  Input,
+  MenuProps,
+  Select,
+  theme,
+} from 'antd';
 import _ from 'lodash';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export type BAIModel = {
   id: string;
@@ -33,6 +45,7 @@ interface LLMChatCardProps extends CardProps {
   credentials?: RequestCredentials;
   fetchOnClient?: boolean;
   allowManualModel?: boolean;
+  alert?: React.ReactNode;
 }
 
 const LLMChatCard: React.FC<LLMChatCardProps> = ({
@@ -43,6 +56,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
   apiKey,
   fetchOnClient,
   allowManualModel: allowCustomModel,
+  alert,
   ...cardProps
 }) => {
   const [modelId, setModelId] = useControllableValue(cardProps, {
@@ -72,6 +86,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
     stop,
     isLoading,
     append,
+    setMessages,
   } = useChat({
     api: baseURL,
     headers,
@@ -108,6 +123,19 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
     },
   });
   const { token } = theme.useToken();
+  const { t } = useTranslation();
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'clear',
+      danger: true,
+      label: t('chatui.DeleteChatHistory'),
+      icon: <DeleteOutlined />,
+      onClick: () => {
+        setMessages([]);
+      },
+    },
+  ];
 
   return (
     <Card
@@ -160,6 +188,14 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
               onChange={setModelId}
               popupMatchSelectWidth={false}
             />
+            <Dropdown menu={{ items }} trigger={['click']}>
+              <Button
+                type="link"
+                onClick={(e) => e.preventDefault()}
+                icon={<MoreOutlined />}
+                style={{ color: token.colorTextSecondary, width: token.sizeMS }}
+              />
+            </Dropdown>
           </Flex>
         </Flex>
       }
@@ -194,6 +230,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
       actions={[
         <form key="input" onSubmit={handleSubmit}>
           <ChatInput
+            autoFocus
             value={input}
             placeholder="Say something..."
             onChange={handleInputChange}
@@ -230,6 +267,9 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
           requiredMark="optional"
           style={{ flex: 1 }}
         >
+          {alert ? (
+            <div style={{ marginBottom: token.size }}>{alert}</div>
+          ) : null}
           <Form.Item
             label="baseURL"
             name="baseURL"

resources/i18n/de.json

@@ -454,7 +454,8 @@
     "PushToImage": "Push-Sitzung auf benutzerdefiniertes Bild",
     "SaveWithoutClose": "Speichern ohne Schließen",
     "Collapse": "Zusammenbruch",
-    "Expand": "Expandieren"
+    "Expand": "Expandieren",
+    "Clear": "Löschen"
   },
   "agent": {
     "Endpoint": "Endpunkt",
@@ -1654,6 +1655,8 @@
     "useAnotherAccount": "Mit einem anderen Konto anmelden"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "LLM-Modelle können nicht gefunden werden. \nBitte passen Sie das Modell an.",
+    "DeleteChatHistory": "Chatverlauf löschen"
   }
 }

resources/i18n/el.json

@@ -454,7 +454,8 @@
     "PushToImage": "Σπρώξτε τη συνεδρία σε προσαρμοσμένη εικόνα",
     "SaveWithoutClose": "Αποθήκευση χωρίς κλείσιμο",
     "Collapse": "Κατάρρευση",
-    "Expand": "Επεκτείνουν"
+    "Expand": "Επεκτείνουν",
+    "Clear": "Διαγράφω"
   },
   "agent": {
     "Endpoint": "Τελικό σημείο",
@@ -1654,6 +1655,8 @@
     "useAnotherAccount": "Συνδεθείτε με διαφορετικό λογαριασμό"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "Δεν μπορούν να βρεθούν μοντέλα LLM. \nΠροσαρμόστε το μοντέλο.",
+    "DeleteChatHistory": "Διαγραφή ιστορικού συνομιλίας"
   }
 }

resources/i18n/en.json

@@ -543,7 +543,8 @@
     "PushToImage": "Push session to customized image",
     "SaveWithoutClose": "Save Without Close",
     "Collapse": "Collapse",
-    "Expand": "Expand"
+    "Expand": "Expand",
+    "Clear": "Clear"
   },
   "agent": {
     "Endpoint": "Endpoint",
@@ -1656,6 +1657,8 @@
     "useAnotherAccount": "Sign in with a different account"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "LLM models cannot be found. Please customize the model.",
+    "DeleteChatHistory": "Delete Chat History"
   }
 }

resources/i18n/es.json

@@ -141,7 +141,8 @@
     "PushToImage": "Enviar sesión a una imagen personalizada",
     "SaveWithoutClose": "Guardar sin cerrar",
     "Collapse": "Colapsar",
-    "Expand": "Expandir"
+    "Expand": "Expandir",
+    "Clear": "Borrar"
   },
   "credential": {
     "AccessKeyOptional": "Clave de acceso (opcional)",
@@ -1656,6 +1657,8 @@
     "useAnotherAccount": "Iniciar sesión con otra cuenta"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "No se pueden encontrar modelos LLM. \nPersonaliza el modelo.",
+    "DeleteChatHistory": "Eliminar historial de chat"
   }
 }

resources/i18n/fi.json

@@ -141,7 +141,8 @@
     "PushToImage": "Työnnä istunto mukautettuun kuvaan",
     "SaveWithoutClose": "Tallenna ilman sulkemista",
     "Collapse": "Romahdus",
-    "Expand": "Laajentaa"
+    "Expand": "Laajentaa",
+    "Clear": "Poistaa"
   },
   "credential": {
     "AccessKeyOptional": "Pääsyavain (valinnainen)",
@@ -1654,6 +1655,8 @@
     "useAnotherAccount": "Kirjaudu sisään eri tilillä"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "LLM-malleja ei löydy. \nMukauta mallia.",
+    "DeleteChatHistory": "Poista keskusteluhistoria"
   }
 }

resources/i18n/fr.json

@@ -454,7 +454,8 @@
     "PushToImage": "Pousser la session vers une image personnalisée",
     "SaveWithoutClose": "Enregistrer sans fermer",
     "Collapse": "Effondrement",
-    "Expand": "Développer"
+    "Expand": "Développer",
+    "Clear": "Supprimer"
   },
   "agent": {
     "Endpoint": "Point de terminaison",
@@ -1654,6 +1655,8 @@
     "useAnotherAccount": "Se connecter avec un autre compte"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "Les modèles LLM sont introuvables. \nVeuillez personnaliser le modèle.",
+    "DeleteChatHistory": "Supprimer l'historique des discussions"
   }
 }

resources/i18n/id.json

@@ -455,7 +455,8 @@
     "PushToImage": "Sesi dorong ke gambar yang disesuaikan",
     "SaveWithoutClose": "Simpan Tanpa Tutup",
     "Collapse": "Runtuh",
-    "Expand": "Memperluas"
+    "Expand": "Memperluas",
+    "Clear": "Menghapus"
   },
   "agent": {
     "Endpoint": "Titik akhir",
@@ -1654,6 +1655,8 @@
     "useAnotherAccount": "Masuk dengan akun yang berbeda"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "Model LLM tidak dapat ditemukan. \nSilakan sesuaikan modelnya.",
+    "DeleteChatHistory": "Hapus Riwayat Obrolan"
   }
 }

resources/i18n/it.json

@@ -455,7 +455,8 @@
     "PushToImage": "Push della sessione all'immagine personalizzata",
     "SaveWithoutClose": "Salva senza chiudere",
     "Collapse": "Crollo",
-    "Expand": "Espandere"
+    "Expand": "Espandere",
+    "Clear": "Eliminare"
   },
   "agent": {
     "Endpoint": "Endpoint",
@@ -1654,6 +1655,8 @@
     "useAnotherAccount": "Accedere con un altro account"
   },
   "chatui": {
-    "OpenChatModal": "LLM Chat"
+    "OpenChatModal": "LLM Chat",
+    "CannotFindModel": "Impossibile trovare i modelli LLM. \nSi prega di personalizzare il modello.",
+    "DeleteChatHistory": "Elimina cronologia chat"
   }
 }