Show thread title in ChatSidebar

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantChatSidebar/AiAssistantChatSidebar.tsx

@@ -11,6 +11,7 @@ import SimpleBar from 'simplebar-react';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError } from '~/client/util/toastr';
 import { MessageErrorCode, StreamErrorCode } from '~/features/openai/interfaces/message-error';
+import type { IThreadRelationHasId } from '~/features/openai/interfaces/thread-relation';
 import { useGrowiCloudUri } from '~/stores-universal/context';
 import loggerFactory from '~/utils/logger';
 
@@ -43,16 +44,16 @@ type FormData = {
 
 type AiAssistantChatSidebarSubstanceProps = {
   aiAssistantData: AiAssistantHasId;
-  threadId?: string;
+  threadData?: IThreadRelationHasId;
   closeAiAssistantChatSidebar: () => void
 }
 
 const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceProps> = (props: AiAssistantChatSidebarSubstanceProps) => {
   const {
-    threadId, aiAssistantData, closeAiAssistantChatSidebar,
+    aiAssistantData, threadData, closeAiAssistantChatSidebar,
   } = props;
 
-  const [currentThreadId, setCurrentThreadId] = useState<string | undefined>(threadId);
+  const [currentThreadId, setCurrentThreadId] = useState<string | undefined>(threadData?.threadId);
   const [messageLogs, setMessageLogs] = useState<Message[]>([]);
   const [generatingAnswerMessage, setGeneratingAnswerMessage] = useState<Message>();
   const [errorMessage, setErrorMessage] = useState<string | undefined>();
@@ -61,7 +62,7 @@ const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceP
   const { t } = useTranslation();
   const { data: growiCloudUri } = useGrowiCloudUri();
   const { trigger: mutateThreadData } = useSWRMUTxThreads(aiAssistantData._id);
-  const { trigger: mutateMessageData } = useSWRMUTxMessages(aiAssistantData._id, threadId);
+  const { trigger: mutateMessageData } = useSWRMUTxMessages(aiAssistantData._id, threadData?.threadId);
 
   const form = useForm<FormData>({
     defaultValues: {
@@ -87,10 +88,10 @@ const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceP
       }
     };
 
-    if (threadId != null) {
+    if (threadData != null) {
       getMessageData();
     }
-  }, [mutateMessageData, threadId]);
+  }, [mutateMessageData, threadData]);
 
   const isGenerating = generatingAnswerMessage != null;
   const submit = useCallback(async(data: FormData) => {
@@ -234,7 +235,7 @@ const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceP
       <div className="d-flex flex-column vh-100">
         <div className="d-flex align-items-center p-3 border-bottom">
           <span className="growi-custom-icons growi-ai-chat-icon me-3 fs-4">ai_assistant</span>
-          <h5 className="mb-0 fw-bold flex-grow-1 text-truncate">{aiAssistantData.name}</h5>
+          <h5 className="mb-0 fw-bold flex-grow-1 text-truncate">{threadData?.title ?? aiAssistantData.name}</h5>
           <button
             type="button"
             className="btn btn-link p-0 border-0"
@@ -404,7 +405,7 @@ export const AiAssistantChatSidebar: FC = memo((): JSX.Element => {
   const { data: aiAssistantChatSidebarData, close: closeAiAssistantChatSidebar } = useAiAssistantChatSidebar();
 
   const aiAssistantData = aiAssistantChatSidebarData?.aiAssistantData;
-  const threadId = aiAssistantChatSidebarData?.threadId;
+  const threadData = aiAssistantChatSidebarData?.threadData;
   const isOpened = aiAssistantChatSidebarData?.isOpened && aiAssistantData != null;
 
   useEffect(() => {
@@ -437,7 +438,7 @@ export const AiAssistantChatSidebar: FC = memo((): JSX.Element => {
         autoHide
       >
         <AiAssistantChatSidebarSubstance
-          threadId={threadId}
+          threadData={threadData}
           aiAssistantData={aiAssistantData}
           closeAiAssistantChatSidebar={closeAiAssistantChatSidebar}
         />

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantTree.tsx

@@ -23,7 +23,7 @@ const moduleClass = styles['ai-assistant-tree-item'] ?? '';
 type ThreadItemProps = {
   thread: IThreadRelationHasId
   aiAssistantData: AiAssistantHasId;
-  onThreadClick: (aiAssistantData: AiAssistantHasId, threadId?: string) => void;
+  onThreadClick: (aiAssistantData: AiAssistantHasId, threadData?: IThreadRelationHasId) => void;
 };
 
 const ThreadItem: React.FC<ThreadItemProps> = ({ thread, aiAssistantData, onThreadClick }) => {
@@ -33,8 +33,8 @@ const ThreadItem: React.FC<ThreadItemProps> = ({ thread, aiAssistantData, onThre
   }, []);
 
   const openChatHandler = useCallback(() => {
-    onThreadClick(aiAssistantData, thread.threadId);
-  }, [aiAssistantData, onThreadClick, thread.threadId]);
+    onThreadClick(aiAssistantData, thread);
+  }, [aiAssistantData, onThreadClick, thread]);
 
   return (
     <li
@@ -69,7 +69,7 @@ const ThreadItem: React.FC<ThreadItemProps> = ({ thread, aiAssistantData, onThre
 */
 type ThreadItemsProps = {
   aiAssistantData: AiAssistantHasId;
-  onThreadClick: (aiAssistantData: AiAssistantHasId, threadId?: string) => void;
+  onThreadClick: (aiAssistantData: AiAssistantHasId, threadData?: IThreadRelationHasId) => void;
 };
 
 const ThreadItems: React.FC<ThreadItemsProps> = ({ aiAssistantData, onThreadClick }) => {
@@ -113,7 +113,7 @@ type AiAssistantItemProps = {
   currentUserId?: string;
   aiAssistant: AiAssistantHasId;
   onEditClick: (aiAssistantData: AiAssistantHasId) => void;
-  onItemClick: (aiAssistantData: AiAssistantHasId, threadId?: string) => void;
+  onItemClick: (aiAssistantData: AiAssistantHasId, threadData?: IThreadRelationHasId) => void;
   onDeleted?: () => void;
 };
 

apps/app/src/features/openai/client/stores/ai-assistant.tsx

@@ -7,6 +7,7 @@ import useSWRImmutable from 'swr/immutable';
 import { apiv3Get } from '~/client/util/apiv3-client';
 
 import { type AccessibleAiAssistantsHasId, type AiAssistantHasId } from '../../interfaces/ai-assistant';
+import type { IThreadRelationHasId } from '../../interfaces/thread-relation';
 
 export const AiAssistantManagementModalPageMode = {
   HOME: 'home',
@@ -57,13 +58,13 @@ export const useSWRxAiAssistants = (): SWRResponse<AccessibleAiAssistantsHasId,
 type AiAssistantChatSidebarStatus = {
   isOpened: boolean,
   aiAssistantData?: AiAssistantHasId,
-  threadId?: string,
+  threadData?: IThreadRelationHasId,
 }
 
 type AiAssistantChatSidebarUtils = {
   open(
     aiAssistantData: AiAssistantHasId,
-    threadId?: string,
+    threadData?: IThreadRelationHasId,
   ): void
   close(): void
 }
@@ -77,7 +78,9 @@ export const useAiAssistantChatSidebar = (
   return {
     ...swrResponse,
     open: useCallback(
-      (aiAssistantData: AiAssistantHasId, threadId?: string) => { swrResponse.mutate({ isOpened: true, aiAssistantData, threadId }) }, [swrResponse],
+      (aiAssistantData: AiAssistantHasId, threadData: IThreadRelationHasId) => {
+        swrResponse.mutate({ isOpened: true, aiAssistantData, threadData });
+      }, [swrResponse],
     ),
     close: useCallback(() => swrResponse.mutate({ isOpened: false }), [swrResponse]),
   };