backend preps

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+api_key.txt

app/ConversationFrontend.tsx

@@ -7,7 +7,7 @@ interface ConversationProps {
   onCopyClick: () => void;
 }
 
-const Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(
+const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
   ({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef<HTMLDivElement>) => {
     return (
       <div className="output">
@@ -40,4 +40,4 @@ const Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(
   }
 );
 
-export default Conversation;
+export default ConversationFrontend;

app/InputBackend.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import InputFrontend from './InputFrontend';
+import ConversationFrontend from './ConversationFrontend';
+import { Mistral } from '@mistralai/mistralai';
+
+async function prompt_mistral(model: string, prompt: string, system: string) {
+  const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";
+
+  const client = new Mistral({ apiKey: apiKey });
+
+  var chatResponse = await client.chat.complete({
+    model: model,
+    messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
+  });
+
+  if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
+    if (chatResponse.choices[0].message.content) {
+      messages.push('AI: ', chatResponse.choices[0].message.content);
+      console.error('Error: Brain Not Found');
+    }
+  } else {
+    console.error('Error: Unexpected API response:', chatResponse);
+  }
+}
+
+const handleSendClick = (message: string) => {
+  messages.push('User: ', message);
+  prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
+};
+
+const handleMicClick = () => {
+  console.log('Mic clicked!');
+  // Do something when the mic button is clicked
+};
+
+var messages = [
+  'User: Hello!',
+  'AI: Hi there!',
+  'User: How are you?',
+  'AI: I’m good, thank you!'
+];
+
+const handleResendClick = () => {
+  console.log('Resend button clicked');
+  // Handle resend action
+};
+
+const handleEditClick = () => {
+  console.log('Edit button clicked');
+  // Handle edit action
+};
+
+const handleCopyClick = () => {
+  console.log('Copy button clicked');
+  // Handle copy action
+};
+
+const InputBackend = () => {
+  return (
+    <div>
+      <ConversationFrontend
+        messages={messages}
+        onResendClick={handleResendClick}
+        onEditClick={handleEditClick}
+        onCopyClick={handleCopyClick}
+      />
+      <InputFrontend
+        message=""
+        onSendClick={handleSendClick}
+        onMicClick={handleMicClick}
+      />
+    </div>
+  );
+};
+
+export default InputBackend;

app/InputForm.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-const InputForm: React.FC = () => {
-  return (
-    <form className="input" method="POST" action="" id="inputForm">
-      <input
-        type="text"
-        name="user_message"
-        placeholder="Type your message here..."
-      />
-      <button type="submit" name="option" value="chat">
-        <img src="/img/send.svg" alt="send" />
-      </button>
-      <button type="submit" name="option" value="voice">
-        <img src="/img/microphone.svg" alt="microphone" />
-      </button>
-    </form>
-  );
-};
-
-export default InputForm;

app/InputFrontend.tsx

@@ -0,0 +1,37 @@
+import React, { useState, ForwardedRef } from 'react';
+
+interface InputProps {
+  message: string;
+  onSendClick: (message: string) => void;
+  onMicClick: () => void;
+}
+
+const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
+  ({ message, onSendClick, onMicClick }, ref: ForwardedRef<HTMLDivElement>) => {
+    const [inputValue, setInputValue] = useState('');
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(e.target.value);
+    };
+
+    return (
+      <div className="input" id="inputForm">
+        <input
+          type="text"
+          name="user_message"
+          placeholder="Type your message here..."
+          value={inputValue}
+          onChange={handleInputChange}
+        />
+        <button type="submit" onClick={() => onSendClick(inputValue)}>
+          <img src="/img/send.svg" alt="send" />
+        </button>
+        <button type="submit" onClick={onMicClick}>
+          <img src="/img/microphone.svg" alt="microphone" />
+        </button>
+      </div>
+    );
+  }
+);
+
+export default InputFrontend;

app/backend/ai_api.ts

@@ -1,12 +0,0 @@
-import ollama from 'ollama'
-
-async function name(model: string, prompt: string, system: string,) {
-  var message = [{ role: 'user', content: prompt }, { role: 'system', content: system }]
-  var response = await ollama.chat({ model: model, messages: message, stream: true })
-  for await (const part of response) {
-    process.stdout.write(part.message.content)
-  }
-}
-
-
-

app/page.tsx

@@ -4,8 +4,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import Header from './Header';
 import History from './History';
 import Models from './Models';
-import Conversation from './Conversation';
-import InputForm from './InputForm';
+import InputBackend from './InputBackend';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
@@ -41,28 +40,6 @@ const LandingPage: React.FC = () => {
     setShowDivs(prevState => !prevState);
   };
 
-  const messages = [
-    'User: Hello!',
-    'AI: Hi there!',
-    'User: How are you?',
-    'AI: I’m good, thank you!'
-  ];
-
-  const handleResendClick = () => {
-    console.log('Resend button clicked');
-    // Handle resend action
-  };
-
-  const handleEditClick = () => {
-    console.log('Edit button clicked');
-    // Handle edit action
-  };
-
-  const handleCopyClick = () => {
-    console.log('Copy button clicked');
-    // Handle copy action
-  };
-
   return (
     <div className="App">
       <Header toggleDivs={toggleDivs} showDivs={showDivs} />
@@ -72,14 +49,7 @@ const LandingPage: React.FC = () => {
           <Models />
         </div>
         <div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
-          <Conversation
-            ref={conversationRef}
-            messages={messages}
-            onResendClick={handleResendClick}
-            onEditClick={handleEditClick}
-            onCopyClick={handleCopyClick}
-          />
-          <InputForm />
+          <InputBackend />
         </div>
       </div>
     </div>

package-lock.json

@@ -8,6 +8,8 @@
       "name": "interstellar_ai",
       "version": "0.1.0",
       "dependencies": {
+        "@mistralai/mistralai": "^1.0.4",
+        "fs": "^0.0.1-security",
         "next": "14.2.12",
         "ollama": "^0.5.9",
         "react": "^18",
@@ -235,6 +237,14 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mistralai/mistralai": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@mistralai/mistralai/-/mistralai-1.0.4.tgz",
+      "integrity": "sha512-fLFBD8r4KvITCkKlKcq2ievnNyLd7Oob4xMY7MkY04BqR4nffkTS49DqapnVkemuldtrmHidwPzwD7UT+yFC4A==",
+      "peerDependencies": {
+        "zod": ">= 3"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.12",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.12.tgz",
@@ -2323,6 +2333,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==",
+      "license": "ISC"
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5319,6 +5335,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mistralai/mistralai": "^1.0.4",
+    "fs": "^0.0.1-security",
     "next": "14.2.12",
     "ollama": "^0.5.9",
     "react": "^18",