Added Hard coded Assistant ID,check out the .env.example file for more details

Author: admineral

.env.example

@@ -1,4 +1,9 @@
-#API KEY HERE#
+# This is the API key provided by OpenAI. You can get this key from your OpenAI account.
+# It is used to authenticate your application's requests to the OpenAI API.
+OPENAI_API_KEY=
 
-
-OPENAI_API_KEY=
+# This is the ID of the assistant that your application will use. 
+# You can get this ID from your OpenAI account.
+# If this value is set, the application will use this assistant for the chat.
+# If this value is not set, the application will prompt the user to enter the assistant details.
+REACT_APP_ASSISTANT_ID=

app/page.tsx

@@ -24,15 +24,22 @@ export default function Chat() {
     inputRef,
     formRef,
     initialThreadMessage, 
-    setInitialThreadMessage
+    setInitialThreadMessage,
+    setChatStarted,
+    chatStarted: chatHasStarted,
+
 
   } = useChatState();
 
   // Initialize ChatManager only once using useEffect
-  const [chatManager, setChatManager] = useState<ChatManager | null>(null);
-  
-  // Add a state to track loading status of message sending
-  const [isMessageLoading, setIsMessageLoading] = useState(false);
+// Initialize ChatManager only once using useEffect
+const [chatManager, setChatManager] = useState<ChatManager | null>(null);
+
+// Set assistantId from environment variable
+const [assistantId, setAssistantId] = useState<string | null>(process.env.REACT_APP_ASSISTANT_ID || '');
+
+// Add a state to track loading status of message sending
+const [isMessageLoading, setIsMessageLoading] = useState(false);
 
   useEffect(() => {
     const chatManagerInstance = ChatManager.getInstance(setChatMessages, setStatusMessage);
@@ -41,7 +48,14 @@ export default function Chat() {
     setIsMessageLoading(chatManagerInstance.getChatState().isLoading);
   }, [setChatMessages, setStatusMessage]);
 
-  // Update chat state and handle assistant response reception
+  useEffect(() => {
+    if (assistantId && chatManager) {
+      console.log('Assistant ID found:', assistantId);
+      chatManager.startAssistantWithId(assistantId, initialThreadMessage);
+    } else {
+      console.warn('Assistant ID not found');
+    }
+  }, [assistantId, chatManager, initialThreadMessage]);
 
 
   const startChatAssistant = async () => {
@@ -51,6 +65,7 @@ export default function Chat() {
       try {
         await chatManager.startAssistant({ assistantName, assistantModel, assistantDescription }, file, initialThreadMessage);
         console.log('Assistant started:', chatManager.getChatState());
+        setChatStarted(true);
       } catch (error) {
         console.error('Error starting assistant:', error);
         if (error instanceof Error) setStatusMessage(`Error: ${error.message}`);
@@ -89,7 +104,7 @@ export default function Chat() {
   return (
     <main className="flex flex-col items-center justify-between pb-40 bg-space-grey-light">
       <LinkBar />
-      {chatMessages.length > 0 ? (
+      {chatHasStarted || assistantId ? (
         <MessageList chatMessages={chatMessages} />
       ) : (
         <WelcomeForm {...{assistantName, setAssistantName, assistantDescription, setAssistantDescription, assistantModel, setAssistantModel, file, handleFileChange, startChatAssistant, isButtonDisabled, isStartLoading, statusMessage}} />

app/services/ChatManager.ts

@@ -136,6 +136,55 @@ class ChatManager {
     }
   }
 
+  async startAssistantWithId(assistantId: string, initialMessage: string): Promise<void> {
+    try {
+      this.state.setStatusMessage('Creating thread...');
+      this.state.assistantId = assistantId;
+      const threadId = await createChatThread(initialMessage);
+      if (threadId === null) {
+        throw new Error('ThreadId is null');
+      }
+      this.state.setStatusMessage('Received thread_ID...');
+  
+      this.state.setStatusMessage('Running assistant...');
+      this.state.threadId = threadId;
+      const runId = await runChatAssistant(this.state.assistantId, this.state.threadId);
+      if (runId === null) {
+        throw new Error('RunId is null');
+      }
+  
+      this.state.runId = runId; 
+      this.state.setStatusMessage('Received Run_ID..');
+  
+      if (this.state.runId && this.state.threadId) {
+        const runId = this.state.runId as string;
+        const threadId = this.state.threadId as string;
+        this.state.setStatusMessage('checking status...');
+        const assistantResponse = await fetchAssistantResponse(runId, threadId);
+        
+        this.state.setStatusMessage('Run complete...');
+        this.state.assistantResponseReceived = true;
+        this.state.setStatusMessage('Received messages...');
+        
+        const newMessage = { role: 'assistant', content: assistantResponse };
+        this.state.setStatusMessage('Adding messages to chat...');
+        
+        this.state.messages = [...this.state.messages, newMessage];
+        this.state.setChatMessages(this.state.messages);
+  
+      } else {
+        console.error('RunId or ThreadId is null. Current state:', this.state);
+      }
+    } catch (error) {
+      this.state.setStatusMessage('Error!');
+      this.state.error = error as Error;
+      console.error('Error in starting assistant:', error);
+    } finally {
+      this.state.setStatusMessage('Done');
+      this.state.isLoading = false;
+    }
+  }
+
 
   async sendMessage(input: string): Promise<void> {
     this.state.isSending = true; 
@@ -175,6 +224,7 @@ class ChatManager {
     }
   }
 
+
   getChatState(): ChatState {
     console.log('Getting chat state');
     return this.state;

next.config.js

@@ -14,8 +14,9 @@ const nextConfig = {
       },
     ];
   },
-
-
+  env: {
+    REACT_APP_ASSISTANT_ID: process.env.REACT_APP_ASSISTANT_ID,
+  },
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;