システムコンテキストを会話履歴とシェアページから保存可能に (#709)

Co-authored-by: Taichiro Suzuki <[email protected]>
aws-samples · Nov 11, 2024 · 4992bc8 · 4992bc8
1 parent 95c22a3
commit 4992bc8
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 53 deletions.
diff --git a/packages/web/src/components/ChatMessage.tsx b/packages/web/src/components/ChatMessage.tsx
@@ -3,8 +3,9 @@ import { useLocation } from 'react-router-dom';
 import Markdown from './Markdown';
 import ButtonCopy from './ButtonCopy';
 import ButtonFeedback from './ButtonFeedback';
+import ButtonIcon from './ButtonIcon';
 import ZoomUpImage from './ZoomUpImage';
-import { PiUserFill, PiChalkboardTeacher } from 'react-icons/pi';
+import { PiUserFill, PiChalkboardTeacher, PiFloppyDisk } from 'react-icons/pi';
 import { BaseProps } from '../@types/common';
 import {
   ShownMessage,
@@ -22,6 +23,8 @@ type Props = BaseProps & {
   chatContent?: ShownMessage;
   loading?: boolean;
   hideFeedback?: boolean;
+  setSaveSystemContext?: (s: string) => void;
+  setShowSystemContextModal?: (value: boolean) => void;
 };
 
 const ChatMessage: React.FC<Props> = (props) => {
@@ -146,7 +149,7 @@ const ChatMessage: React.FC<Props> = (props) => {
             </div>
           )}
 
-          <div className="ml-5 w-full pr-14">
+          <div className="ml-5 w-full pr-8 lg:pr-14">
             {chatContent?.trace && (
               <details className="mb-2 cursor-pointer rounded border p-2">
                 <summary className="text-sm">
@@ -217,16 +220,23 @@ const ChatMessage: React.FC<Props> = (props) => {
             )}
 
             {chatContent?.role === 'assistant' && (
-              <div className="mb-1 mt-2 text-right text-xs text-gray-400 lg:mb-0">
+              <div className="mt-2 text-right text-xs text-gray-400 lg:mb-0">
                 {chatContent?.llmType}
               </div>
             )}
           </div>
         </div>
 
-        <div className="flex items-start justify-end print:hidden">
-          {(chatContent?.role === 'user' || chatContent?.role === 'system') && (
-            <div className="lg:w-8"></div>
+        <div className="mt-1 flex items-start justify-end pr-8 lg:pr-14 print:hidden">
+          {chatContent?.role === 'system' && (
+            <ButtonIcon
+              className="text-gray-400"
+              onClick={() => {
+                props.setSaveSystemContext?.(chatContent?.content || '');
+                props.setShowSystemContextModal?.(true);
+              }}>
+              <PiFloppyDisk />
+            </ButtonIcon>
           )}
           {chatContent?.role === 'assistant' &&
             !props.loading &&

diff --git a/packages/web/src/components/ModalSystemContext.tsx b/packages/web/src/components/ModalSystemContext.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import ModalDialog from './ModalDialog';
+import { BaseProps } from '../@types/common';
+import Textarea from './Textarea';
+import Button from './Button';
+
+type Props = BaseProps & {
+  showSystemContextModal: boolean;
+  saveSystemContext: string;
+  saveSystemContextTitle: string;
+  setShowSystemContextModal: (show: boolean) => void;
+  setSaveSystemContext: (systemContext: string) => void;
+  setSaveSystemContextTitle: (title: string) => void;
+  onCreateSystemContext: () => void;
+};
+
+const ModalSystemContext: React.FC<Props> = (props) => {
+  return (
+    <>
+      <ModalDialog
+        title="システムコンテキストの作成"
+        isOpen={props.showSystemContextModal}
+        onClose={() => {
+          props.setShowSystemContextModal(false);
+        }}>
+        <div className="py-2.5">タイトル</div>
+
+        <Textarea
+          placeholder="入力してください"
+          value={props.saveSystemContextTitle}
+          onChange={props.setSaveSystemContextTitle}
+          maxHeight={-1}
+          className="text-aws-font-color"
+        />
+
+        <div className="py-2.5">システムコンテキスト</div>
+        <Textarea
+          placeholder="入力してください"
+          value={props.saveSystemContext}
+          onChange={props.setSaveSystemContext}
+          maxHeight={500}
+          className="text-aws-font-color"
+        />
+
+        <div className="mt-4 flex justify-end gap-2">
+          <Button
+            outlined
+            onClick={() => props.setShowSystemContextModal(false)}
+            className="p-2">
+            キャンセル
+          </Button>
+          <Button
+            onClick={() => {
+              props.setShowSystemContextModal(false);
+              props.onCreateSystemContext();
+            }}
+            className="bg-red-500 p-2 text-white"
+            disabled={
+              props.saveSystemContext === '' ||
+              props.saveSystemContextTitle === ''
+            }>
+            作成
+          </Button>
+        </div>
+      </ModalDialog>
+    </>
+  );
+};
+
+export default ModalSystemContext;
diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
@@ -10,7 +10,7 @@ import PromptList from '../components/PromptList';
 import Button from '../components/Button';
 import ButtonCopy from '../components/ButtonCopy';
 import ModalDialog from '../components/ModalDialog';
-import Textarea from '../components/Textarea';
+import ModalSystemContext from '../components/ModalSystemContext';
 import ExpandableField from '../components/ExpandableField';
 import Switch from '../components/Switch';
 import Select from '../components/Select';
@@ -426,6 +426,8 @@ const ChatPage: React.FC = () => {
                 <ChatMessage
                   chatContent={chat}
                   loading={loading && idx === showingMessages.length - 1}
+                  setSaveSystemContext={setSaveSystemContext}
+                  setShowSystemContextModal={setShowSystemContextModal}
                 />
                 <div className="w-full border-b border-gray-300"></div>
               </div>
@@ -503,51 +505,15 @@ const ChatPage: React.FC = () => {
         />
       )}
 
-      <ModalDialog
-        title="システムコンテキストの作成"
-        isOpen={showSystemContextModal}
-        onClose={() => {
-          setShowSystemContextModal(false);
-        }}>
-        <div className="py-2.5">タイトル</div>
-
-        <Textarea
-          placeholder="入力してください"
-          value={saveSystemContextTitle}
-          onChange={setSaveSystemContextTitle}
-          maxHeight={-1}
-          className="text-aws-font-color"
-        />
-
-        <div className="py-2.5">システムコンテキスト</div>
-        <Textarea
-          placeholder={saveSystemContext ?? '入力してください'}
-          value={saveSystemContext}
-          onChange={setSaveSystemContext}
-          maxHeight={500}
-          className="text-aws-font-color"
-        />
-
-        <div className="mt-4 flex justify-end gap-2">
-          <Button
-            outlined
-            onClick={() => setShowSystemContextModal(false)}
-            className="p-2">
-            キャンセル
-          </Button>
-          <Button
-            onClick={() => {
-              setShowSystemContextModal(false);
-              onCreateSystemContext();
-            }}
-            className="bg-red-500 p-2 text-white"
-            disabled={
-              saveSystemContext === '' || saveSystemContextTitle === ''
-            }>
-            作成
-          </Button>
-        </div>
-      </ModalDialog>
+      <ModalSystemContext
+        showSystemContextModal={showSystemContextModal}
+        saveSystemContext={saveSystemContext}
+        saveSystemContextTitle={saveSystemContextTitle}
+        setShowSystemContextModal={setShowSystemContextModal}
+        setSaveSystemContext={setSaveSystemContext}
+        setSaveSystemContextTitle={setSaveSystemContextTitle}
+        onCreateSystemContext={onCreateSystemContext}
+      />
 
       <ModalDialog
         isOpen={showShareIdModal}

diff --git a/packages/web/src/pages/SharedChatPage.tsx b/packages/web/src/pages/SharedChatPage.tsx
@@ -1,14 +1,20 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import useChatApi from '../hooks/useChatApi';
+import useSystemContextApi from '../hooks/useSystemContextApi';
 import ChatMessage from '../components/ChatMessage';
 import BedrockIcon from '../assets/bedrock.svg?react';
 import ScrollTopBottom from '../components/ScrollTopBottom';
+import ModalSystemContext from '../components/ModalSystemContext';
 
 const SharedChatPage: React.FC = () => {
   const { shareId } = useParams();
   const { getSharedChat } = useChatApi();
   const { data: chatAndMessages, isLoading, error } = getSharedChat(shareId!);
+  const [showSystemContextModal, setShowSystemContextModal] = useState(false);
+  const [saveSystemContext, setSaveSystemContext] = useState('');
+  const [saveSystemContextTitle, setSaveSystemContextTitle] = useState('');
+  const { createSystemContext } = useSystemContextApi();
 
   const title = useMemo(() => {
     if (chatAndMessages) {
@@ -40,6 +46,23 @@ const SharedChatPage: React.FC = () => {
     }
   }, [showSystemContext, rawMessages, messages]);
 
+  const onCreateSystemContext = useCallback(async () => {
+    try {
+      await createSystemContext(saveSystemContextTitle, saveSystemContext);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setShowSystemContextModal(false);
+      setSaveSystemContextTitle('');
+    }
+  }, [
+    createSystemContext,
+    setShowSystemContextModal,
+    setSaveSystemContextTitle,
+    saveSystemContextTitle,
+    saveSystemContext,
+  ]);
+
   return (
     <>
       <div className="relative">
@@ -82,6 +105,8 @@ const SharedChatPage: React.FC = () => {
                   chatContent={chat}
                   loading={isLoading && idx === showingMessages.length - 1}
                   hideFeedback={true}
+                  setSaveSystemContext={setSaveSystemContext}
+                  setShowSystemContextModal={setShowSystemContextModal}
                 />
                 <div className="w-full border-b border-gray-300"></div>
               </div>
@@ -90,6 +115,16 @@ const SharedChatPage: React.FC = () => {
             <div className="fixed right-4 top-[calc(50vh-2rem)] z-0 lg:right-8">
               <ScrollTopBottom />
             </div>
+
+            <ModalSystemContext
+              showSystemContextModal={showSystemContextModal}
+              saveSystemContext={saveSystemContext}
+              saveSystemContextTitle={saveSystemContextTitle}
+              setShowSystemContextModal={setShowSystemContextModal}
+              setSaveSystemContext={setSaveSystemContext}
+              setSaveSystemContextTitle={setSaveSystemContextTitle}
+              onCreateSystemContext={onCreateSystemContext}
+            />
           </>
         )}