model 切り替え時に prompter に応じて systemContext を変更する

packages/web/src/hooks/useChat.ts

@@ -560,6 +560,11 @@ const useChat = (id: string, chatId?: string) => {
     updateSystemContext: (systemContext: string) => {
       updateSystemContext(id, systemContext);
     },
+    updateSystemContextByModel: () => {
+      const modelId = getModelId(id);
+      const prompter = getPrompter(modelId);
+      updateSystemContext(id, prompter.systemContext(id));
+    },
     getCurrentSystemContext: () => {
       return getCurrentSystemContext(id);
     },

packages/web/src/pages/AgentChatPage.tsx

@@ -10,6 +10,7 @@ import { create } from 'zustand';
 import { ReactComponent as BedrockIcon } from '../assets/bedrock.svg';
 import { AgentPageQueryParams } from '../@types/navigate';
 import { MODELS } from '../hooks/useModel';
+import { getPrompter } from '../prompts';
 import { v4 as uuidv4 } from 'uuid';
 import queryString from 'query-string';
 
@@ -51,11 +52,20 @@ const AgentChatPage: React.FC = () => {
     messages,
     clear,
     postChat,
+    updateSystemContextByModel,
   } = useChat(pathname, chatId);
   const { scrollToBottom, scrollToTop } = useScroll();
   const { getConversationTitle } = useConversation();
   const { agentNames: availableModels } = MODELS;
   const modelId = getModelId();
+  const prompter = useMemo(() => {
+    return getPrompter(modelId);
+  }, [modelId]);
+
+  useEffect(() => {
+    updateSystemContextByModel();
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
 
   const title = useMemo(() => {
     if (chatId) {

packages/web/src/pages/ChatPage.tsx

@@ -64,6 +64,7 @@ const ChatPage: React.FC = () => {
     clear,
     postChat,
     updateSystemContext,
+    updateSystemContextByModel,
     getCurrentSystemContext,
   } = useChat(pathname, chatId);
   const { createShareId, findShareId, deleteShareId } = useChatApi();
@@ -76,6 +77,14 @@ const ChatPage: React.FC = () => {
     return getPrompter(modelId);
   }, [modelId]);
 
+  useEffect(() => {
+    // 会話履歴のページではモデルを変更してもシステムコンテキストを変更しない
+    if (!chatId) {
+      updateSystemContextByModel();
+    }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
+
   const title = useMemo(() => {
     if (chatId) {
       return getConversationTitle(chatId) || 'チャット';

packages/web/src/pages/EditorialPage.tsx

@@ -89,6 +89,7 @@ const EditorialPage: React.FC = () => {
     messages,
     postChat,
     clear: clearChat,
+    updateSystemContextByModel,
   } = useChat(pathname);
   const { modelIds: availableModels } = MODELS;
   const modelId = getModelId();
@@ -97,6 +98,11 @@ const EditorialPage: React.FC = () => {
   }, [modelId]);
   const [auto, setAuto] = useState(true);
 
+  useEffect(() => {
+    updateSystemContextByModel();
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
+
   // Memo 変数
   const filterComment = (
     _comments: DocumentComment[],

packages/web/src/pages/GenerateImagePage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import Card from '../components/Card';
 import Button from '../components/Button';
 import Textarea from '../components/Textarea';
@@ -20,6 +20,7 @@ import Base64Image from '../components/Base64Image';
 import { AxiosError } from 'axios';
 import { GenerateImagePageQueryParams } from '../@types/navigate';
 import { MODELS } from '../hooks/useModel';
+import { getPrompter } from '../prompts';
 import queryString from 'query-string';
 
 const MAX_SAMPLE = 7;
@@ -234,13 +235,22 @@ const GenerateImagePage: React.FC = () => {
     setModelId,
     loading: loadingChat,
     clear: clearChat,
+    updateSystemContextByModel,
   } = useChat(pathname);
 
   const [generating, setGenerating] = useState(false);
   const [isOpenSketch, setIsOpenSketch] = useState(false);
   const [selectedImageIndex, setSelectedImageIndex] = useState(0);
   const { modelIds, imageGenModelIds, imageGenModels } = MODELS;
   const modelId = getModelId();
+  const prompter = useMemo(() => {
+    return getPrompter(modelId);
+  }, [modelId]);
+
+  useEffect(() => {
+    updateSystemContextByModel();
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
 
   // LandingPage のデモデータ設定
   useEffect(() => {

packages/web/src/pages/GenerateTextPage.tsx

@@ -71,6 +71,7 @@ const GenerateTextPage: React.FC = () => {
     messages,
     postChat,
     clear: clearChat,
+    updateSystemContextByModel,
   } = useChat(pathname);
   const { setTypingTextInput, typingTextOutput } = useTyping(loading);
   const { modelIds: availableModels } = MODELS;
@@ -79,6 +80,11 @@ const GenerateTextPage: React.FC = () => {
     return getPrompter(modelId);
   }, [modelId]);
 
+  useEffect(() => {
+    updateSystemContextByModel();
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
+
   const disabledExec = useMemo(() => {
     return information === '' || loading;
   }, [information, loading]);

packages/web/src/pages/SummarizePage.tsx

@@ -72,6 +72,7 @@ const SummarizePage: React.FC = () => {
     messages,
     postChat,
     clear: clearChat,
+    updateSystemContextByModel,
   } = useChat(pathname);
   const { setTypingTextInput, typingTextOutput } = useTyping(loading);
   const { modelIds: availableModels } = MODELS;
@@ -80,6 +81,11 @@ const SummarizePage: React.FC = () => {
     return getPrompter(modelId);
   }, [modelId]);
 
+  useEffect(() => {
+    updateSystemContextByModel();
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
+
   const disabledExec = useMemo(() => {
     return sentence === '' || loading;
   }, [sentence, loading]);

packages/web/src/pages/TranslatePage.tsx

@@ -95,6 +95,7 @@ const TranslatePage: React.FC = () => {
     messages,
     postChat,
     clear: clearChat,
+    updateSystemContextByModel,
   } = useChat(pathname);
   const { setTypingTextInput, typingTextOutput } = useTyping(loading);
   const { modelIds: availableModels } = MODELS;
@@ -104,6 +105,11 @@ const TranslatePage: React.FC = () => {
   }, [modelId]);
   const [auto, setAuto] = useState(true);
 
+  useEffect(() => {
+    updateSystemContextByModel();
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
+
   // Memo 変数
   const disabledExec = useMemo(() => {
     return sentence === '' || loading;

packages/web/src/pages/WebContent.tsx

@@ -96,6 +96,7 @@ const WebContent: React.FC = () => {
     messages,
     postChat,
     clear: clearChat,
+    updateSystemContextByModel,
   } = useChat(pathname);
   const { setTypingTextInput, typingTextOutput } = useTyping(loading);
   const { getWebText } = useChatApi();
@@ -106,6 +107,11 @@ const WebContent: React.FC = () => {
     return getPrompter(modelId);
   }, [modelId]);
 
+  useEffect(() => {
+    updateSystemContextByModel();
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [prompter]);
+
   const disabledExec = useMemo(() => {
     return url === '' || loading || fetching;
   }, [url, loading, fetching]);