From bd8f2bc5b9be5afc74a16174fff5994d50e5da98 Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Wed, 20 Nov 2024 00:14:02 -0500
Subject: [PATCH] refactor: Set the most recently created token as the
 placeholder.

---
 .../lablupTalkativotUI/ChatUIModal.tsx        | 26 +++++++++++++++++++
 .../lablupTalkativotUI/LLMChatCard.tsx        |  3 +++
 react/src/pages/EndpointDetailPage.tsx        |  2 ++
 3 files changed, 31 insertions(+)

diff --git a/react/src/components/lablupTalkativotUI/ChatUIModal.tsx b/react/src/components/lablupTalkativotUI/ChatUIModal.tsx
index 875dc0a18e..93373e7df5 100644
--- a/react/src/components/lablupTalkativotUI/ChatUIModal.tsx
+++ b/react/src/components/lablupTalkativotUI/ChatUIModal.tsx
@@ -1,6 +1,7 @@
 import { useTanQuery } from '../../hooks/reactQueryAlias';
 import Flex from '../Flex';
 import LLMChatCard from './LLMChatCard';
+import { ChatUIModalEndpointTokenListFragment$key } from './__generated__/ChatUIModalEndpointTokenListFragment.graphql';
 import { ChatUIModalFragment$key } from './__generated__/ChatUIModalFragment.graphql';
 import { ReloadOutlined } from '@ant-design/icons';
 import { Alert, Button, Modal, ModalProps, Skeleton, theme } from 'antd';
@@ -12,6 +13,10 @@ import { useFragment } from 'react-relay';
 
 interface ChatUIBasicProps {
   endpointFrgmt: ChatUIModalFragment$key | null | undefined;
+  endpointTokenFrgmt:
+    | ChatUIModalEndpointTokenListFragment$key
+    | null
+    | undefined;
   basePath?: string;
   // models?: GetProp<typeof LLMChatCard, 'models'>;
 }
@@ -19,6 +24,7 @@ interface ChatUIModalProps extends ModalProps, ChatUIBasicProps {}
 
 const ChatUIModal: React.FC<ChatUIModalProps> = ({
   endpointFrgmt = null,
+  endpointTokenFrgmt = null,
   basePath,
   // models,
   ...props
@@ -47,6 +53,7 @@ const ChatUIModal: React.FC<ChatUIModalProps> = ({
         <EndpointChatContent
           basePath={basePath}
           endpointFrgmt={endpointFrgmt}
+          endpointTokenFrgmt={endpointTokenFrgmt}
         />
       </Flex>
     </Modal>
@@ -55,6 +62,7 @@ const ChatUIModal: React.FC<ChatUIModalProps> = ({
 
 const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
   endpointFrgmt,
+  endpointTokenFrgmt,
   basePath = 'v1',
 }) => {
   const { t } = useTranslation();
@@ -68,6 +76,23 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
     `,
     endpointFrgmt,
   );
+  const endpointTokenList = useFragment(
+    graphql`
+      fragment ChatUIModalEndpointTokenListFragment on EndpointTokenList {
+        items {
+          id
+          token
+          created_at
+        }
+      }
+    `,
+    endpointTokenFrgmt,
+  );
+  const newestToken = _.maxBy(
+    endpointTokenList?.items,
+    (item) => item?.created_at,
+  )?.token;
+
   const {
     data: modelsResult,
     // error,
@@ -117,6 +142,7 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
         )
       }
       modelId={modelsResult?.data?.[0].id ?? 'custom'}
+      modelToken={newestToken}
       showCompareMenuItem
     />
   );
diff --git a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
index d0850fadcd..46dcbaa200 100644
--- a/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
+++ b/react/src/components/lablupTalkativotUI/LLMChatCard.tsx
@@ -58,6 +58,7 @@ export interface LLMChatCardProps extends CardProps {
   onInputChange?: (input: string) => void;
   onSubmitChange?: () => void;
   showCompareMenuItem?: boolean;
+  modelToken?: string;
 }
 
 const LLMChatCard: React.FC<LLMChatCardProps> = ({
@@ -76,6 +77,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
   onInputChange,
   onSubmitChange,
   showCompareMenuItem,
+  modelToken,
   ...cardProps
 }) => {
   const webuiNavigate = useWebUINavigate();
@@ -306,6 +308,7 @@ const LLMChatCard: React.FC<LLMChatCardProps> = ({
           key={baseURL}
           initialValues={{
             baseURL: baseURL,
+            token: modelToken,
           }}
         >
           {alert ? (
diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx
index 1cd4ed6507..876ffde2bf 100644
--- a/react/src/pages/EndpointDetailPage.tsx
+++ b/react/src/pages/EndpointDetailPage.tsx
@@ -202,6 +202,7 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
               created_at
               valid_until
             }
+            ...ChatUIModalEndpointTokenListFragment
           }
         }
       `,
@@ -723,6 +724,7 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
       ></EndpointTokenGenerationModal>
       <ChatUIModal
         endpointFrgmt={endpoint}
+        endpointTokenFrgmt={endpoint_token_list}
         open={openChatModal}
         onCancel={() => {
           setOpenChatModal(false);