feat(FR-536): Move LLM Playground to on the top menu (#3195)

resolves #NNN (FR-536)

Adds a dedicated Chat page accessible from the main navigation menu. The chat functionality has been moved from the Serving page to its own route at /chat. This change includes:

- New Chat menu item in the main navigation sidebar
- Relocated chat components from lablupTalkativotUI to a dedicated Chat directory
- Added chat-related translations for all supported languages
- Simplified the initial chat interface to start with a single chat window instead of two

Author: ragingwind

react/src/App.tsx

@@ -69,6 +69,8 @@ const SessionDetailAndContainerLogOpenerLegacy = React.lazy(
   () => import('./components/SessionDetailAndContainerLogOpenerLegacy'),
 );
 
+const ChatPage = React.lazy(() => import('./pages/ChatPage'));
+
 interface CustomHandle {
   title?: string;
   labelKey?: string;
@@ -122,6 +124,11 @@ const router = createBrowserRouter([
         path: '/app/index.html',
         element: <WebUINavigate to="/summary" replace />,
       },
+      {
+        path: '/chat',
+        handle: { labelKey: 'webui.menu.Chat' },
+        Component: ChatPage,
+      },
       {
         path: '/summary',
         Component: () => {

react/src/components/lablupTalkativotUI/ChatMessage.tsx renamed to react/src/components/Chat/ChatMessage.tsx

@@ -25,6 +25,7 @@ import {
   FileDoneOutlined,
   HddOutlined,
   InfoCircleOutlined,
+  MessageOutlined,
   SolutionOutlined,
   ToolOutlined,
   UserOutlined,
@@ -113,6 +114,11 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       icon: <PlayIcon style={{ color: token.colorPrimary }} />,
       key: 'import',
     },
+    {
+      label: <WebUILink to="/chat">{t('webui.menu.Chat')}</WebUILink>,
+      icon: <MessageOutlined style={{ color: token.colorPrimary }} />,
+      key: 'chat',
+    },
     {
       label: <WebUILink to="/data">{t('webui.menu.Data&Storage')}</WebUILink>,
       icon: <CloudUploadOutlined style={{ color: token.colorPrimary }} />,

react/src/components/lablupTalkativotUI/ChatMessageContent.tsx renamed to react/src/components/Chat/ChatMessageContent.tsx

@@ -1,6 +1,7 @@
-import Flex from '../Flex';
-import EndpointLLMChatCard from './EndpointLLMChatCard';
-import { LLMPlaygroundPageQuery } from './__generated__/LLMPlaygroundPageQuery.graphql';
+import BAICard from '../components/BAICard';
+import EndpointLLMChatCard from '../components/Chat/EndpointLLMChatCard';
+import Flex from '../components/Flex';
+import { ChatPageQuery } from './__generated__/ChatPageQuery.graphql';
 import { PlusOutlined } from '@ant-design/icons';
 import { useDynamicList } from 'ahooks';
 import { Button, Card, Skeleton, Switch, theme, Typography } from 'antd';
@@ -11,26 +12,23 @@ import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
 import { StringParam, useQueryParam } from 'use-query-params';
 
-interface LLMPlaygroundPageProps {}
+interface ChatPageProps {}
 
-const LLMPlaygroundPage: React.FC<LLMPlaygroundPageProps> = ({ ...props }) => {
+const ChatPage: React.FC<ChatPageProps> = ({ ...props }) => {
   const { token } = theme.useToken();
   const { t } = useTranslation();
   // Set the initial list to have two items
-  const { list, remove, getKey, push } = useDynamicList(['0', '1']);
+  const { list, remove, getKey, push } = useDynamicList(['0']);
 
   const [isSynchronous, setSynchronous] = useState(false);
 
   const [endpointId] = useQueryParam('endpointId', StringParam);
   const [modelId] = useQueryParam('modelId', StringParam);
   const isEmptyEndpointId = !endpointId;
 
-  const { endpoint, endpoint_list } = useLazyLoadQuery<LLMPlaygroundPageQuery>(
+  const { endpoint, endpoint_list } = useLazyLoadQuery<ChatPageQuery>(
     graphql`
-      query LLMPlaygroundPageQuery(
-        $endpointId: UUID!
-        $isEmptyEndpointId: Boolean!
-      ) {
+      query ChatPageQuery($endpointId: UUID!, $isEmptyEndpointId: Boolean!) {
         endpoint(endpoint_id: $endpointId)
           @skipOnClient(if: $isEmptyEndpointId) {
           ...EndpointLLMChatCard_endpoint
@@ -48,49 +46,47 @@ const LLMPlaygroundPage: React.FC<LLMPlaygroundPageProps> = ({ ...props }) => {
     },
   );
   return (
-    <>
-      <Flex direction="column" align="stretch">
-        <Flex
-          direction="row"
-          justify="between"
-          wrap="wrap"
-          gap={'xs'}
-          style={{
-            padding: token.paddingContentVertical,
-            paddingLeft: token.paddingContentHorizontalSM,
-            paddingRight: token.paddingContentHorizontalSM,
-          }}
-        >
-          <Flex direction="column" align="start">
-            <Typography.Text style={{ margin: 0, padding: 0 }}>
-              LLM Playground
+    <BAICard
+      title={t('webui.menu.Chat')}
+      styles={{
+        body: {
+          padding: 0,
+          paddingTop: 1,
+          overflow: 'hidden',
+        },
+      }}
+      extra={
+        <Flex direction="row" gap={'xs'} wrap="wrap" style={{ flexShrink: 1 }}>
+          <Flex gap={'xs'}>
+            <Typography.Text type="secondary">
+              {t('chatui.SyncInput')}
             </Typography.Text>
-          </Flex>
-          <Flex
-            direction="row"
-            gap={'xs'}
-            wrap="wrap"
-            style={{ flexShrink: 1 }}
-          >
-            <Flex gap={'xs'}>
-              <Typography.Text type="secondary">
-                {t('chatui.SyncInput')}
-              </Typography.Text>
-              <Switch
-                value={isSynchronous}
-                onClick={(v) => {
-                  setSynchronous(v);
-                }}
-              />
-              <Button
-                onClick={() => {
-                  push(new Date().toString());
-                }}
-                icon={<PlusOutlined />}
-              />
-            </Flex>
+            <Switch
+              value={isSynchronous}
+              onClick={(v) => {
+                setSynchronous(v);
+              }}
+            />
+            <Button
+              onClick={() => {
+                push(new Date().toString());
+              }}
+              icon={<PlusOutlined />}
+            />
           </Flex>
         </Flex>
+      }
+    >
+      <Flex
+        direction="column"
+        align="stretch"
+        gap={'xs'}
+        style={{
+          padding: token.paddingContentVertical,
+          paddingLeft: token.paddingContentHorizontalSM,
+          paddingRight: token.paddingContentHorizontalSM,
+        }}
+      >
         <Flex
           gap={'xs'}
           direction="row"
@@ -139,8 +135,8 @@ const LLMPlaygroundPage: React.FC<LLMPlaygroundPageProps> = ({ ...props }) => {
           ))}
         </Flex>
       </Flex>
-    </>
+    </BAICard>
   );
 };
 
-export default LLMPlaygroundPage;
+export default ChatPage;

react/src/components/lablupTalkativotUI/ChatMessageList.tsx renamed to react/src/components/Chat/ChatMessageList.tsx

@@ -16,7 +16,6 @@ import UnmountModalAfterClose from '../components/UnmountModalAfterClose';
 import VFolderLazyView from '../components/VFolderLazyView';
 import { AutoScalingRuleEditorModalFragment$key } from '../components/__generated__/AutoScalingRuleEditorModalFragment.graphql';
 import { InferenceSessionErrorModalFragment$key } from '../components/__generated__/InferenceSessionErrorModalFragment.graphql';
-import ChatUIModal from '../components/lablupTalkativotUI/ChatUIModal';
 import { baiSignedRequestWithPromise, filterNonNullItems } from '../helper';
 import {
   useSuspendedBackendaiClient,
@@ -123,7 +122,6 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
     useState<AutoScalingRuleEditorModalFragment$key | null>(null);
   const [isOpenTokenGenerationModal, setIsOpenTokenGenerationModal] =
     useState(false);
-  const [openChatModal, setOpenChatModal] = useState(false);
   const [isOpenAutoScalingRuleModal, setIsOpenAutoScalingRuleModal] =
     useState(false);
   const [currentUser] = useCurrentUserInfo();
@@ -214,7 +212,6 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
             created_user_email @since(version: "23.09.8")
             ...EndpointOwnerInfoFragment
             ...EndpointStatusTagFragment
-            ...ChatUIModalFragment
             ...ServiceLauncherPageContentFragment
           }
           endpoint_token_list(
@@ -233,7 +230,6 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
               created_at
               valid_until
             }
-            ...ChatUIModalEndpointTokenListFragment
           }
           endpoint_auto_scaling_rules: endpoint_auto_scaling_rule_nodes(
             endpoint: $autoScalingRules_endpointId
@@ -386,7 +382,7 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
               type="link"
               icon={<BotMessageSquareIcon />}
               onClick={() => {
-                setOpenChatModal(true);
+                webuiNavigate(`/chat?endpointId=${endpoint?.endpoint_id}`);
               }}
               disabled={endpoint?.status !== 'HEALTHY'}
             />
@@ -1080,14 +1076,6 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
         }}
         endpoint_id={endpoint?.endpoint_id || ''}
       ></EndpointTokenGenerationModal>
-      <ChatUIModal
-        endpointFrgmt={endpoint}
-        endpointTokenFrgmt={endpoint_token_list}
-        open={openChatModal}
-        onCancel={() => {
-          setOpenChatModal(false);
-        }}
-      />
       {isSupportAutoScalingRule && (
         <UnmountModalAfterClose>
           <AutoScalingRuleEditorModal

react/src/components/lablupTalkativotUI/ChatSender.tsx renamed to react/src/components/Chat/ChatSender.tsx

@@ -1,6 +1,5 @@
 import Flex from '../components/Flex';
 import { filterEmptyItem } from '../helper';
-import { useSuspendedBackendaiClient } from '../hooks';
 import { Card, Skeleton, theme } from 'antd';
 import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,9 +9,6 @@ import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 type TabKey = 'services' | 'chatting'; //  "running" | "finished" | "others";
 
 const EndpointListPage = React.lazy(() => import('./EndpointListPage'));
-const ChattingPage = React.lazy(
-  () => import('../components/lablupTalkativotUI/LLMPlaygroundPage'),
-);
 
 interface ServingPageProps {}
 
@@ -24,7 +20,6 @@ const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
   const [curTabKey, setCurTabKey] = useQueryParam('tab', tabParam, {
     updateType: 'replace',
   });
-  const baiClient = useSuspendedBackendaiClient();
 
   const tabList = filterEmptyItem([
     { key: 'services', label: t('modelService.Services') },
@@ -41,10 +36,6 @@ const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
     //   key: "others",
     //   label: t("session.Others"),
     // },
-    baiClient._config.enableLLMPlayground && {
-      key: 'chatting',
-      label: 'LLM Playground',
-    },
   ]);
   return (
     <Flex direction="column" align="stretch" gap={'md'}>
@@ -69,13 +60,6 @@ const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
             <EndpointListPage />
           </Suspense>
         ) : null}
-        {curTabKey === 'chatting' && baiClient._config.enableLLMPlayground ? (
-          <Suspense
-            fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
-          >
-            <ChattingPage />
-          </Suspense>
-        ) : null}
       </Card>
     </Flex>
   );

react/src/components/lablupTalkativotUI/ChatUIModal.tsx renamed to react/src/components/Chat/ChatUIModal.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "Die E-Mail-Adresse des Benutzers stimmt nicht überein",
       "MyEnvironments": "Meine Umgebungen",
       "ResourcePolicy": "Ressourcenpolitik",
-      "FullNameUpdated": "Der vollständige Name wurde erfolgreich aktualisiert."
+      "FullNameUpdated": "Der vollständige Name wurde erfolgreich aktualisiert.",
+      "Chat": "Chat"
     },
     "YouAreOffline": "Offline: Keine Verbindung zu einem Netzwerk.",
     "YouAreOnline": "Sie sind jetzt online",

react/src/components/lablupTalkativotUI/CopyButton.tsx renamed to react/src/components/Chat/CopyButton.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "Το email χρήστη δεν ταιριάζει",
       "MyEnvironments": "Τα περιβάλλοντα μου",
       "ResourcePolicy": "Πολιτική Πόρων",
-      "FullNameUpdated": "Το πλήρες όνομα ενημερώθηκε με επιτυχία."
+      "FullNameUpdated": "Το πλήρες όνομα ενημερώθηκε με επιτυχία.",
+      "Chat": "Συνομιλία"
     },
     "YouAreOffline": "Offline: Δεν είναι συνδεδεμένος σε κανένα δίκτυο.",
     "YouAreOnline": "Είστε πλέον συνδεδεμένοι",

react/src/components/lablupTalkativotUI/EndpointLLMChatCard.tsx renamed to react/src/components/Chat/EndpointLLMChatCard.tsx

@@ -65,7 +65,8 @@
       "DisMatchUserEmail": "User email does not match",
       "MyEnvironments": "My Environments",
       "ResourcePolicy": "Resource Policy",
-      "FullNameUpdated": "Full name is successfully updated."
+      "FullNameUpdated": "Full name is successfully updated.",
+      "Chat": "Chat"
     },
     "YouAreOffline": "Offline: Not connected to any networks.",
     "YouAreOnline": "You are now online",

react/src/components/lablupTalkativotUI/LLMChatCard.tsx renamed to react/src/components/Chat/LLMChatCard.tsx

@@ -1657,7 +1657,8 @@
       "DisMatchUserEmail": "El correo electrónico del usuario no coincide",
       "MyEnvironments": "Mis ambientes",
       "ResourcePolicy": "Política de recursos",
-      "FullNameUpdated": "El nombre completo se ha actualizado correctamente."
+      "FullNameUpdated": "El nombre completo se ha actualizado correctamente.",
+      "Chat": "Chat"
     },
     "NetworkSoftTimeout": "El servidor está tardando más en responder. Por favor, espere un momento",
     "NotFound": "<p>¡Oops!<br/>Página no encontrada...</p>",

react/src/components/lablupTalkativotUI/ModelSelect.tsx renamed to react/src/components/Chat/ModelSelect.tsx

@@ -1657,7 +1657,8 @@
       "DisMatchUserEmail": "Käyttäjän sähköpostiosoite ei täsmää",
       "MyEnvironments": "Omat ympäristöt",
       "ResourcePolicy": "Resurssipolitiikka",
-      "FullNameUpdated": "Koko nimi on päivitetty onnistuneesti."
+      "FullNameUpdated": "Koko nimi on päivitetty onnistuneesti.",
+      "Chat": "Chat"
     },
     "NetworkSoftTimeout": "Palvelimen vastaus kestää kauemmin. Odota hetki",
     "NotFound": "<p>Oops!<br/>Sivua ei löydy...</p>",

react/src/components/lablupTalkativotUI/ScrollBottomHandlerButton.tsx renamed to react/src/components/Chat/ScrollBottomHandlerButton.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "L'e-mail de l'utilisateur ne correspond pas",
       "MyEnvironments": "Mes environnements",
       "ResourcePolicy": "Politique des ressources",
-      "FullNameUpdated": "Le nom complet a été mis à jour avec succès."
+      "FullNameUpdated": "Le nom complet a été mis à jour avec succès.",
+      "Chat": "Chat"
     },
     "YouAreOffline": "Hors ligne : N'est connecté à aucun réseau.",
     "YouAreOnline": "Vous êtes maintenant en ligne",

react/src/components/lablupTalkativotUI/VirtualChatMessageList.tsx renamed to react/src/components/Chat/VirtualChatMessageList.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "Email Pengguna tidak cocok",
       "MyEnvironments": "Lingkungan Saya",
       "ResourcePolicy": "Kebijakan Sumber Daya",
-      "FullNameUpdated": "Nama lengkap berhasil diperbarui."
+      "FullNameUpdated": "Nama lengkap berhasil diperbarui.",
+      "Chat": "Mengobrol"
     },
     "YouAreOffline": "Offline: Tidak terhubung ke jaringan apa pun.",
     "YouAreOnline": "Anda sekarang online",

react/src/components/MainLayout/WebUISider.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "L'e-mail dell'utente non corrisponde",
       "MyEnvironments": "I miei ambienti",
       "ResourcePolicy": "Politica delle risorse",
-      "FullNameUpdated": "Il nome completo è stato aggiornato con successo."
+      "FullNameUpdated": "Il nome completo è stato aggiornato con successo.",
+      "Chat": "Chat"
     },
     "YouAreOffline": "Non in linea: Non è collegato ad alcuna rete.",
     "YouAreOnline": "Ora sei online",

react/src/components/lablupTalkativotUI/LLMPlaygroundPage.tsx renamed to react/src/pages/ChatPage.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "ユーザーの電子メールが一致しません",
       "MyEnvironments": "私の環境",
       "ResourcePolicy": "リソースポリシー",
-      "FullNameUpdated": "フルネームが正常に更新されました。"
+      "FullNameUpdated": "フルネームが正常に更新されました。",
+      "Chat": "チャット"
     },
     "YouAreOffline": "オフライン：どのネットワークにも接続されていない。",
     "YouAreOnline": "あなたは今オンラインです",

react/src/pages/EndpointDetailPage.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "사용자 이메일이 일치하지 않습니다.",
       "MyEnvironments": "나의 실행 환경",
       "ResourcePolicy": "자원 정책",
-      "FullNameUpdated": "사용자 이름이 갱신되었습니다."
+      "FullNameUpdated": "사용자 이름이 갱신되었습니다.",
+      "Chat": "채팅"
     },
     "YouAreOffline": "오프라인: 네트워크에 연결되어 있지 않습니다.",
     "YouAreOnline": "온라인 상태가 되었습니다",

react/src/pages/ServingPage.tsx

@@ -66,7 +66,8 @@
       "DisMatchUserEmail": "Хэрэглэгчийн имэйл таарахгүй байна",
       "MyEnvironments": "Миний орчин",
       "ResourcePolicy": "Нөөцийн бодлого",
-      "FullNameUpdated": "Бүтэн нэр амжилттай шинэчлэгдлээ."
+      "FullNameUpdated": "Бүтэн нэр амжилттай шинэчлэгдлээ.",
+      "Chat": "Яриа хөрөө"
     },
     "YouAreOffline": "Офлайн: Ямар ч сүлжээнд холбогдоогүй.",
     "YouAreOnline": "Та одоо онлайн байна",