chore: add validation

aws-samples · Jan 24, 2025 · ed0c21d · ed0c21d
1 parent 3215665
commit ed0c21d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/source/portal/src/locale/en.json b/source/portal/src/locale/en.json
@@ -166,6 +166,7 @@
     "chatbotNameDesc": "The unique identifier of the robot space, it must not duplicate with any existing ones",
     "modelDesc": "Used for text vectorization in the robot space.",
     "indexManagement": "Indexes",
+    "chatbotModelProviderError": "This chatbot does not support API inference, only local inference is supported. Please create another chatbot to enable API reference.",
     "indexLeft": "Index not yet configured, click",
     "indexUsedByModel": "This index is already associated with other embedding models",
     "indexRight": "to add index.",

diff --git a/source/portal/src/locale/zh.json b/source/portal/src/locale/zh.json
@@ -92,6 +92,7 @@
     "rad": "随机 & 多样性",
     "maxRounds": "保持记忆的最大轮数",
     "topKRetrievals": "召回最关联的K条",
+    "chatbotModelProviderError": "此聊天机器人不支持API推理，仅支持本地推理。请创建另一个聊天机器人以启用API引用",
     "score": "相关度分数",
     "scenarioDesc": "当前会话的应用场景",
     "modelTypeDesc": "LLM 模型供应商",

diff --git a/source/portal/src/pages/chatbot/ChatBot.tsx b/source/portal/src/pages/chatbot/ChatBot.tsx
@@ -177,6 +177,10 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
   // Define an async function to get the data
   const fetchData = useAxiosRequest();
 
+  const [chatbotModelProvider, setChatbotModelProvider] = useState<{ [key: string]: string }>({});
+
+  const [modelProviderHint, setModelProviderHint] = useState('');
+
   const startNewChat = () => {
     [CURRENT_CHAT_BOT,ENABLE_TRACE,MAX_TOKEN, MODEL_OPTION,ONLY_RAG_TOOL,MODEL_TYPE,TEMPERATURE,USE_CHAT_HISTORY].forEach((item) => {
       localStorage.removeItem(item);
@@ -212,11 +216,15 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
         url: 'chatbot-management/chatbots',
         method: 'get',
       });
-      const chatbots: string[] = data.chatbot_ids;
+      const chatbots: { ChatbotId: string; ModelProvider: string }[] = data.Items;
       const getChatbots = chatbots.map((item) => {
+        setChatbotModelProvider((prev) => ({
+          ...prev,
+          [item.ChatbotId]: item.ModelProvider,
+        }));
         return {
-          label: item,
-          value: item,
+          label: item.ChatbotId,
+          value: item.ChatbotId,
         };
       });
       setChatbotList(getChatbots);
@@ -772,12 +780,23 @@ const ChatBot: React.FC<ChatBotProps> = (props: ChatBotProps) => {
                 <div style={{fontSize: 16, fontWeight: 700, marginBottom: 15, marginTop: 15}}>{t('common')}</div>
                 <SpaceBetween size="xs" direction="vertical">
                 <Grid gridDefinition={[{colspan: 5},{colspan: 6}]}>
-                  <FormField label={t('modelProvider')} stretch={true} description={t('scenarioDesc')}>
+                  <FormField label={t('modelProvider')} stretch={true} description={t('scenarioDesc')} errorText={modelProviderHint}>
                     <Select
                       options={MODEL_TYPE_LIST}
                       selectedOption={modelType}
                       onChange={({ detail }) => {
                         setModelType(detail.selectedOption);
+
+                        // Check if the selected model provider matches the chatbot's model provider
+                        const selectedChatbotId = chatbotOption.value;
+                        const expectedModelProvider = chatbotModelProvider[selectedChatbotId];
+
+                        if (expectedModelProvider === "Bedrock" && 
+                            (detail.selectedOption.value === "Bedrock API" || detail.selectedOption.value === "OpenAI API")) {
+                          setModelProviderHint(t('chatbotModelProviderError'));
+                        } else {
+                          setModelProviderHint(''); // Clear hint if the selection is valid
+                        }
                       }}
                     />
                   </FormField>