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

react/src/components/lablupTalkativotUI/ChatUIModal.tsx

@@ -1,24 +1,31 @@
 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';
 import graphql from 'babel-plugin-relay/macro';
+import dayjs from 'dayjs';
 import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 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 +54,7 @@ const ChatUIModal: React.FC<ChatUIModalProps> = ({
         <EndpointChatContent
           basePath={basePath}
           endpointFrgmt={endpointFrgmt}
+          endpointTokenFrgmt={endpointTokenFrgmt}
         />
       </Flex>
     </Modal>
@@ -55,6 +63,7 @@ const ChatUIModal: React.FC<ChatUIModalProps> = ({
 
 const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
   endpointFrgmt,
+  endpointTokenFrgmt,
   basePath = 'v1',
 }) => {
   const { t } = useTranslation();
@@ -68,6 +77,32 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
     `,
     endpointFrgmt,
   );
+  const endpointTokenList = useFragment(
+    graphql`
+      fragment ChatUIModalEndpointTokenListFragment on EndpointTokenList {
+        items {
+          id
+          token
+          created_at
+          valid_until
+        }
+      }
+    `,
+    endpointTokenFrgmt,
+  );
+
+  const newestToken = _.maxBy(
+    endpointTokenList?.items,
+    (item) => item?.created_at,
+  );
+  // FIXME: temporally parse UTC and change to timezone (timezone need to be added in server side)
+  const newestValidToken = dayjs
+    .utc(newestToken?.valid_until)
+    .tz()
+    .isAfter(dayjs())
+    ? newestToken?.token
+    : undefined;
+
   const {
     data: modelsResult,
     // error,
@@ -117,6 +152,7 @@ const EndpointChatContent: React.FC<ChatUIBasicProps> = ({
         )
       }
       modelId={modelsResult?.data?.[0].id ?? 'custom'}
+      modelToken={newestValidToken}
       showCompareMenuItem
     />
   );

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 ? (

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);