From bd2cab8a9dd76f90c462e55727496b3059195bcb Mon Sep 17 00:00:00 2001
From: Maki <sunwood.ai.labs@gmail.com>
Date: Thu, 17 Oct 2024 00:20:36 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9B=EF=B8=8F=20[feat]=20Add=20model=20?=
 =?UTF-8?q?selection=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implement a dropdown to select different AI models
- Update component props to include selectedModel and setSelectedModel
- Add options for Claude 3.5, GPT-4o, o1-preview, o1-mini, AWS Bedrock Claude, and Gemini (disabled)
---
 app/components/chat/BaseChat.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index b3820e1..c675c0b 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -25,6 +25,8 @@ interface BaseChatProps {
   sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   enhancePrompt?: () => void;
+  selectedModel: string;
+  setSelectedModel: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const EXAMPLE_PROMPTS = [
@@ -54,6 +56,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       handleInputChange,
       enhancePrompt,
       handleStop,
+      selectedModel,
+      setSelectedModel,
     },
     ref,
   ) => {
@@ -86,6 +90,21 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 'h-full flex flex-col': chatStarted,
               })}
             >
+              <div className="flex justify-center items-center p-2">
+                {/* モデル選択用のセレクトボックス */}
+                <select
+                  value={selectedModel}
+                  onChange={(e) => setSelectedModel(e.target.value)}
+                  className="p-0.5 border rounded bg-black text-white text-sm"
+                >
+                  <option value="claude">Claude 3.5</option>
+                  <option value="gpt-4o">OpenAI GPT-4o</option>
+                  <option value="o1-preview">OpenAI o1-preview</option>
+                  <option value="o1-mini">OpenAI o1-mini</option>
+                  <option value="bedrock">AWS Bedrock Claude</option>
+                  <option value="gemini" disabled>gemini-pro(not implemented)</option>
+                </select>
+              </div>
               <ClientOnly>
                 {() => {
                   return chatStarted ? (
@@ -133,6 +152,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     placeholder="How can Bolt help you today?"
                     translate="no"
                   />
+
                   <ClientOnly>
                     {() => (
                       <SendButton