refactor: Set the most recently created token as the placeholder.

lablup · Nov 20, 2024 · bd8f2bc · bd8f2bc
1 parent 19f959b
commit bd8f2bc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git 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,13 +13,18 @@ import { useFragment } from 'react-relay';
 
 interface ChatUIBasicProps {
   endpointFrgmt: ChatUIModalFragment$key | null | undefined;
+  endpointTokenFrgmt:
+    | ChatUIModalEndpointTokenListFragment$key
+    | null
+    | undefined;
   basePath?: string;
   // models?: GetProp<typeof LLMChatCard, 'models'>;
 }
 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
@@ -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
@@ -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);