Browse Source

Impl AiAssistantChatInitialView

Shun Miyazawa 1 year ago
parent
commit
8e741085a4

+ 47 - 0
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantChatInitialView.tsx

@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  description: string,
+  additionalInstruction: string,
+  pagePathPatterns: string[],
+}
+
+export const AiAssistantChatInitialView: React.FC<Props> = ({ description, additionalInstruction, pagePathPatterns }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <p className="fs-6 text-body-secondary mb-0">
+        {description}
+      </p>
+
+      <div>
+        <p className="text-body-secondary">{t('sidebar_ai_assistant.instruction_label')}</p>
+        <div className="card bg-body-tertiary border-0">
+          <div className="card-body p-3">
+            <p className="fs-6 text-body-secondary mb-0">
+              {additionalInstruction}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div className="d-flex align-items-center">
+          <p className="text-body-secondary mb-0">{t('sidebar_ai_assistant.reference_pages_label')}</p>
+        </div>
+        <div className="d-flex flex-column gap-1">
+          { pagePathPatterns.map(pagePathPattern => (
+            <a
+              key={pagePathPattern}
+              href="#"
+              className="fs-6 text-body-secondary text-decoration-none"
+            >
+              {pagePathPattern}
+            </a>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

+ 10 - 33
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar.tsx

@@ -23,6 +23,7 @@ import { useAiAssistantSidebar } from '../../../stores/ai-assistant';
 import { useSWRMUTxMessages } from '../../../stores/message';
 import { useSWRMUTxThreads } from '../../../stores/thread';
 
+import { AiAssistantChatInitialView } from './AiAssistantChatInitialView';
 import { MessageCard } from './MessageCard';
 import { ResizableTextarea } from './ResizableTextArea';
 
@@ -318,39 +319,15 @@ const AiAssistantSidebarSubstance: React.FC<AiAssistantSidebarSubstanceProps> =
               </div>
             )
             : (
-              <>
-                <p className="fs-6 text-body-secondary mb-0">
-                  {aiAssistantData?.description}
-                </p>
-
-                <div>
-                  <p className="text-body-secondary">{t('sidebar_ai_assistant.instruction_label')}</p>
-                  <div className="card bg-body-tertiary border-0">
-                    <div className="card-body p-3">
-                      <p className="fs-6 text-body-secondary mb-0">
-                        {aiAssistantData?.additionalInstruction}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div>
-                  <div className="d-flex align-items-center">
-                    <p className="text-body-secondary mb-0">{t('sidebar_ai_assistant.reference_pages_label')}</p>
-                  </div>
-                  <div className="d-flex flex-column gap-1">
-                    { aiAssistantData?.pagePathPatterns.map(pagePathPattern => (
-                      <a
-                        key={pagePathPattern}
-                        href="#"
-                        className="fs-6 text-body-secondary text-decoration-none"
-                      >
-                        {pagePathPattern}
-                      </a>
-                    ))}
-                  </div>
-                </div>
-
+              <>{isEditorAssistant
+                ? <></> // TODO https://redmine.weseek.co.jp/issues/163079
+                : (
+                  <AiAssistantChatInitialView
+                    description={aiAssistantData?.description ?? ''}
+                    additionalInstruction={aiAssistantData?.additionalInstruction ?? ''}
+                    pagePathPatterns={aiAssistantData?.pagePathPatterns ?? []}
+                  />
+                )}
               </>
             )
           }