Просмотр исходного кода

Enable AiAssistant data display in RightSidebar

Shun Miyazawa 1 год назад
Родитель
Сommit
ae4d77a4dd

+ 5 - 2
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantChatSidebar/AiAssistantChatSidebar.tsx

@@ -4,6 +4,7 @@ import {
 
 
 import SimpleBar from 'simplebar-react';
 import SimpleBar from 'simplebar-react';
 
 
+import type { AiAssistantHasId } from '../../../../interfaces/ai-assistant';
 import { useAiAssistantChatSidebar } from '../../../stores/ai-assistant';
 import { useAiAssistantChatSidebar } from '../../../stores/ai-assistant';
 
 
 import styles from './AiAssistantChatSidebar.module.scss';
 import styles from './AiAssistantChatSidebar.module.scss';
@@ -13,17 +14,18 @@ const moduleClass = styles['grw-ai-assistant-chat-sidebar'] ?? '';
 const RIGHT_SIDEBAR_WIDTH = 500;
 const RIGHT_SIDEBAR_WIDTH = 500;
 
 
 type AiAssistantChatSidebarSubstanceProps = {
 type AiAssistantChatSidebarSubstanceProps = {
+  aiAssistantData?: AiAssistantHasId;
   closeAiAssistantChatSidebar: () => void
   closeAiAssistantChatSidebar: () => void
 }
 }
 
 
 const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceProps> = (props: AiAssistantChatSidebarSubstanceProps) => {
 const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceProps> = (props: AiAssistantChatSidebarSubstanceProps) => {
-  const { closeAiAssistantChatSidebar } = props;
+  const { aiAssistantData, closeAiAssistantChatSidebar } = props;
 
 
   return (
   return (
     <>
     <>
       <div className="d-flex align-items-center p-3 border-bottom">
       <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>
         <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">GROWI AI について</h5>
+        <h5 className="mb-0 fw-bold flex-grow-1 text-truncate">{aiAssistantData?.name}</h5>
         <button
         <button
           type="button"
           type="button"
           className="btn btn-link p-0 border-0"
           className="btn btn-link p-0 border-0"
@@ -77,6 +79,7 @@ export const AiAssistantChatSidebar: FC = memo((): JSX.Element => {
             autoHide
             autoHide
           >
           >
             <AiAssistantChatSidebarSubstance
             <AiAssistantChatSidebarSubstance
+              aiAssistantData={aiAssistantChatSidebarData?.aiAssistantData}
               closeAiAssistantChatSidebar={closeAiAssistantChatSidebar}
               closeAiAssistantChatSidebar={closeAiAssistantChatSidebar}
             />
             />
           </SimpleBar>
           </SimpleBar>

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

@@ -85,7 +85,7 @@ type AiAssistantItemProps = {
   currentUserId?: string;
   currentUserId?: string;
   aiAssistant: AiAssistantHasId;
   aiAssistant: AiAssistantHasId;
   threads: Thread[];
   threads: Thread[];
-  onItemClicked?: () => void;
+  onItemClicked?: (aiAssistantData: AiAssistantHasId) => void;
   onDeleted?: () => void;
   onDeleted?: () => void;
 };
 };
 
 
@@ -98,8 +98,8 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
 }) => {
 }) => {
   const [isThreadsOpened, setIsThreadsOpened] = useState(false);
   const [isThreadsOpened, setIsThreadsOpened] = useState(false);
 
 
-  const openChatHandler = useCallback(() => {
-    onItemClicked?.();
+  const openChatHandler = useCallback((aiAssistantData: AiAssistantHasId) => {
+    onItemClicked?.(aiAssistantData);
   }, [onItemClicked]);
   }, [onItemClicked]);
 
 
   const openThreadsHandler = useCallback(() => {
   const openThreadsHandler = useCallback(() => {
@@ -122,7 +122,7 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
   return (
   return (
     <>
     <>
       <li
       <li
-        onClick={openChatHandler}
+        onClick={() => openChatHandler(aiAssistant)}
         role="button"
         role="button"
         className="list-group-item list-group-item-action border-0 d-flex align-items-center rounded-1"
         className="list-group-item list-group-item-action border-0 d-flex align-items-center rounded-1"
       >
       >

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

@@ -6,7 +6,7 @@ import useSWRImmutable from 'swr/immutable';
 
 
 import { apiv3Get } from '~/client/util/apiv3-client';
 import { apiv3Get } from '~/client/util/apiv3-client';
 
 
-import { type AccessibleAiAssistantsHasId } from '../../interfaces/ai-assistant';
+import { type AccessibleAiAssistantsHasId, type AiAssistantHasId } from '../../interfaces/ai-assistant';
 
 
 export const AiAssistantManagementModalPageMode = {
 export const AiAssistantManagementModalPageMode = {
   HOME: 'home',
   HOME: 'home',
@@ -55,10 +55,11 @@ export const useSWRxAiAssistants = (): SWRResponse<AccessibleAiAssistantsHasId,
 
 
 type AiAssistantChatSidebarStatus = {
 type AiAssistantChatSidebarStatus = {
   isOpened: boolean,
   isOpened: boolean,
+  aiAssistantData?: AiAssistantHasId;
 }
 }
 
 
 type AiAssistantChatSidebarUtils = {
 type AiAssistantChatSidebarUtils = {
-  open(): void
+  open(aiAssistantData: AiAssistantHasId): void
   close(): void
   close(): void
 }
 }
 
 
@@ -70,7 +71,7 @@ export const useAiAssistantChatSidebar = (
 
 
   return {
   return {
     ...swrResponse,
     ...swrResponse,
-    open: useCallback(() => { swrResponse.mutate({ isOpened: true }) }, [swrResponse]),
+    open: useCallback((aiAssistantData: AiAssistantHasId) => { swrResponse.mutate({ isOpened: true, aiAssistantData }) }, [swrResponse]),
     close: useCallback(() => swrResponse.mutate({ isOpened: false }), [swrResponse]),
     close: useCallback(() => swrResponse.mutate({ isOpened: false }), [swrResponse]),
   };
   };
 };
 };