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; } @@ -19,6 +24,7 @@ interface ChatUIModalProps extends ModalProps, ChatUIBasicProps {} const ChatUIModal: React.FC = ({ endpointFrgmt = null, + endpointTokenFrgmt = null, basePath, // models, ...props @@ -47,6 +53,7 @@ const ChatUIModal: React.FC = ({ @@ -55,6 +62,7 @@ const ChatUIModal: React.FC = ({ const EndpointChatContent: React.FC = ({ endpointFrgmt, + endpointTokenFrgmt, basePath = 'v1', }) => { const { t } = useTranslation(); @@ -68,6 +76,23 @@ const EndpointChatContent: React.FC = ({ `, 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 = ({ ) } 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 = ({ @@ -76,6 +77,7 @@ const LLMChatCard: React.FC = ({ onInputChange, onSubmitChange, showCompareMenuItem, + modelToken, ...cardProps }) => { const webuiNavigate = useWebUINavigate(); @@ -306,6 +308,7 @@ const LLMChatCard: React.FC = ({ 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 = () => { created_at valid_until } + ...ChatUIModalEndpointTokenListFragment } } `, @@ -723,6 +724,7 @@ const EndpointDetailPage: React.FC = () => { > { setOpenChatModal(false);