Merge pull request #102 from RipeSeed/feature/model-persistent

feat: Selected model persistent in the dropdown

Author: raousama391

src/app/_components/ChatMessages.tsx

@@ -40,7 +40,6 @@ export function ChatMessages() {
     updateStateMetadata,
     resetStateMetadata,
     addedAskRSmsg,
-    isOpenAI,
   } = useStore()
 
   const queryClient = useQueryClient()
@@ -109,10 +108,9 @@ export function ChatMessages() {
 
   useEffect(() => {
     if (messages.length) {
-      addedAskRSmsg()
       scrollToBottom()
     }
-  }, [addedAskRSmsg, messages])
+  }, [messages])
 
   useEffect(() => {
     if (clearChat) {
@@ -200,6 +198,9 @@ export function ChatMessages() {
     setMessages((prev) => [...prev, chatbotMessage])
     const _id = await appendMessageContent_aRS(-1, chatbotMessage.content)
 
+    const storedModel = localStorage.getItem('selected_model');
+    const isOpenAI = storedModel === 'openai';
+
     await sendMessageMutation({
       message: tmpMessage,
       uId,

src/app/_utils/store/store.ts

@@ -10,7 +10,6 @@ interface State {
   openAIKey: string
   clearChat: boolean
   askRSmsg: boolean
-  isOpenAI: boolean
 
   stateMetadata: {
     chatId: number
@@ -27,7 +26,6 @@ interface State {
   toggleDeleteDialogOpen: () => void
   setOpenAIKey: (key: string) => void
   setClearChat: (value: boolean) => void
-  setIsOpenAI: (value: boolean) => void
   updateStateMetadata: (metadata: Partial<State['stateMetadata']>) => void
   resetStateMetadata: () => void
 }
@@ -40,7 +38,6 @@ const useStore = create<State>((set) => ({
   openAIKey: '',
   clearChat: false,
   askRSmsg: false,
-  isOpenAI: true,
 
   stateMetadata: {
     chatId: 0,
@@ -59,7 +56,6 @@ const useStore = create<State>((set) => ({
     set((state) => ({ isDeleteDialogOpen: !state.isDeleteDialogOpen })),
   setOpenAIKey: (key) => set({ openAIKey: key }),
   setClearChat: (value) => set({ clearChat: value }),
-  setIsOpenAI: (value) => set({ isOpenAI: value }),
 
   updateStateMetadata: (metadata) =>
     set((state) => ({

src/app/api/chat/ask-ripeseed/route.ts

@@ -15,7 +15,7 @@ export async function POST(request: Request) {
     [indexId],
     apiKey,
     true,
-    isOpenAI
+    isOpenAI,
   )
 
   return new Response(streamedResponse, {

src/components/common/_components/ModelSelect.tsx

@@ -1,39 +1,56 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
-import useStore from '@/app/_utils/store/store'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from "@/components/ui/select";
 
 interface ModelSelectProps {
-  className?: string
+  className?: string;
 }
 
-const ModelSelect: React.FC<ModelSelectProps> = ({ className = '' }) => {
-  const { isOpenAI, setIsOpenAI } = useStore()
+const ModelSelect: React.FC<ModelSelectProps> = ({
+                                                   className = '',
+                                                 }) => {
 
+  const [selectedModel, setSelectedModel] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('selected_model') || 'openai';
+    }
+    return 'openai';
+  });
+
+  // Update localStorage when model changes
   const handleValueChange = (value: string) => {
-    setIsOpenAI(value === 'openai')
-  }
+    setSelectedModel(value);
+    localStorage.setItem('selected_model', value);
+  };
+
+  // Sync with localStorage on mount
+  useEffect(() => {
+    const storedModel = localStorage.getItem('selected_model');
+    if (storedModel) {
+      setSelectedModel(storedModel);
+    }
+  }, []);
 
   return (
     <Select
-      defaultValue={isOpenAI ? 'openai' : 'deepseek'}
+      value={selectedModel}
       onValueChange={handleValueChange}
     >
       <SelectTrigger className={`w-32 ${className}`}>
-        <SelectValue placeholder='Select Model' />
+        <SelectValue placeholder="Select Model" />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value='deepseek'>DeepSeek</SelectItem>
-        <SelectItem value='openai'>OpenAI</SelectItem>
+        <SelectItem value="deepseek">DeepSeek</SelectItem>
+        <SelectItem value="openai">OpenAI</SelectItem>
       </SelectContent>
     </Select>
-  )
-}
+  );
+};
 
-export default ModelSelect
+export default ModelSelect;

src/dal/message/askRS_sendMessage.ts

@@ -34,7 +34,7 @@ export const askRS_sendMessage = async ({
           content: message.content,
         },
       ],
-      isOpenAI
+      isOpenAI,
     })
 
     const requestOptions = {

src/services/chat/conversation.ts

@@ -1,15 +1,16 @@
-import {  OpenAIEmbeddings } from '@langchain/openai'
+import { OpenAIEmbeddings } from '@langchain/openai'
 import { Document } from 'langchain/document'
 import { formatDocumentsAsString } from 'langchain/util/document'
 
 import 'server-only'
 
-import { pineconeIndex } from './config'
 import { OpenAI } from 'openai'
 
+import { pineconeIndex } from './config'
+
 export interface Context {
-  role: 'system' | 'user' | 'assistant' | 'tool' | 'function';
-  content: string;
+  role: 'system' | 'user' | 'assistant' | 'tool' | 'function'
+  content: string
 }
 
 const instructions = `
@@ -26,37 +27,41 @@ const instructions = `
   Note: If user asks something NOT related to ripeseed, like any code snippet any other general question excuse them politely and ask them to ask the relevant questions regarding ripeseed.
 `
 
-const tools:  OpenAI.Chat.ChatCompletionTool[] = [
+const tools: OpenAI.Chat.ChatCompletionTool[] = [
   {
-    "type": "function",
-    "function": {
-      "name": "book_meeting_call_appointment",
-      "description": "If someone wants to talk, books calls, meetings, appointments, or any meet-up with RipeSeed",
-      "parameters": {
-        "type": "object",
-        "properties": {},
-        "required": []
-      }
-    }
-  }
+    type: 'function',
+    function: {
+      name: 'book_meeting_call_appointment',
+      description:
+        'If someone wants to talk, books calls, meetings, appointments, or any meet-up with RipeSeed',
+      parameters: {
+        type: 'object',
+        properties: {},
+        required: [],
+      },
+    },
+  },
 ]
 
 interface QuestionGeneratorInput {
-  instructions: string;
-  context: string;
-  chatHistory?: string;
-  question: string;
+  instructions: string
+  context: string
+  chatHistory?: string
+  question: string
 }
 
-const getChain = async (questionGeneratorInput: QuestionGeneratorInput, isOpenAi: boolean) => {
-
-  const openai = isOpenAi ? new OpenAI() : new OpenAI({
-    baseURL: process.env.DEEPSEEK_BASE_URL,
-    apiKey: process.env.DEEPSEEK_API_KEY
-  });
-
-  const finalPrompt =
-    `Use the following pieces of context to answer the question at the end.
+const getChain = async (
+  questionGeneratorInput: QuestionGeneratorInput,
+  isOpenAi: boolean,
+) => {
+  const openai = isOpenAi
+    ? new OpenAI()
+    : new OpenAI({
+        baseURL: process.env.DEEPSEEK_BASE_URL,
+        apiKey: process.env.DEEPSEEK_API_KEY,
+      })
+
+  const finalPrompt = `Use the following pieces of context to answer the question at the end.
     ----------
     CONTEXT: ${questionGeneratorInput.context}
     ----------
@@ -68,20 +73,20 @@ const getChain = async (questionGeneratorInput: QuestionGeneratorInput, isOpenAi
 
   const messages = [
     {
-      role: "system" as const,
-      content: instructions
+      role: 'system' as const,
+      content: instructions,
     },
-    { role: "user" as const, content: finalPrompt }
-  ];
+    { role: 'user' as const, content: finalPrompt },
+  ]
 
   const stream: any = await openai.chat.completions.create({
     model: isOpenAi ? 'gpt-4o-mini' : 'deepseek-chat',
     messages: messages,
     stream: true,
     temperature: 0,
     tools: tools,
-    tool_choice: "auto"
-  });
+    tool_choice: 'auto',
+  })
 
   return stream
 }
@@ -146,19 +151,21 @@ export function converse(
       }
 
       const stream = await getChain(questionGeneratorInput, isOpenAi)
-      let completeMessage = '';
+      let completeMessage = ''
       for await (const chunk of stream) {
         if (chunk.choices[0]?.delta?.content) {
-          const content = chunk.choices[0].delta.content;
-          controller.enqueue(content);
-          completeMessage += content;
+          const content = chunk.choices[0].delta.content
+          controller.enqueue(content)
+          completeMessage += content
         }
 
         if (chunk.choices[0]?.delta?.tool_calls) {
-          const toolCalls = chunk.choices[0].delta.tool_calls;
+          const toolCalls = chunk.choices[0].delta.tool_calls
           if (Array.isArray(toolCalls) && toolCalls.length > 0) {
-            if (toolCalls[0].function?.name === "book_meeting_call_appointment") {
-              controller.enqueue("BOOK_MEETING");
+            if (
+              toolCalls[0].function?.name === 'book_meeting_call_appointment'
+            ) {
+              controller.enqueue('BOOK_MEETING')
             }
           }
         }