From f7643b41085336a5a1d3def47f20b6c031f57aa9 Mon Sep 17 00:00:00 2001
From: STetsing <41009393+STetsing@users.noreply.github.com>
Date: Fri, 27 Sep 2024 15:42:52 +0200
Subject: [PATCH] initial chat

---
 .../src/app/plugins/remixAIPlugin.tsx         |  14 +-
 apps/remix-ide/src/remixAppManager.js         |   1 -
 .../src/inferencers/remote/remoteInference.ts |   2 +-
 .../remix-ai/src/lib/components/Default.tsx   | 182 +++++++++++-------
 package.json                                  |   3 +
 yarn.lock                                     |  17 ++
 6 files changed, 138 insertions(+), 81 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx b/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx
index 0fd0917d08..52f236f159 100644
--- a/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx
+++ b/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx
@@ -16,13 +16,13 @@ const profile = {
   icon: 'assets/img/remix-logo-blue.png',
   description: 'RemixAI provides AI services to Remix IDE.',
   kind: '',
-  // location: 'sidePanel',
+  location: 'sidePanel',
   documentation: 'https://remix-ide.readthedocs.io/en/latest/remixai.html',
   version: packageJson.version,
   maintainedBy: 'Remix'
 }
 
-export class RemixAIPlugin extends Plugin {
+export class RemixAIPlugin extends ViewPlugin {
   isOnDesktop:boolean = false
   aiIsActivated:boolean = false
   readonly remixDesktopPluginName = 'remixAID'
@@ -169,9 +169,9 @@ export class RemixAIPlugin extends Plugin {
     }
   }
 
-  // render() {
-  //   return (
-  //     <RemixAITab plugin={this}></RemixAITab>
-  //   )
-  // }
+  render() {
+    return (
+      <RemixAITab plugin={this}></RemixAITab>
+    )
+  }
 }
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index 9dab012bd5..1f080ad7ff 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -77,7 +77,6 @@ let requiredModules = [ // services + layout views + system views
   'doc-gen',
   'remix-templates',
   'remixAID',
-  'remixAI',
   'solhint',
   'dgit',
   'pinnedPanel',
diff --git a/libs/remix-ai-core/src/inferencers/remote/remoteInference.ts b/libs/remix-ai-core/src/inferencers/remote/remoteInference.ts
index 638b35422b..0c37cf751a 100644
--- a/libs/remix-ai-core/src/inferencers/remote/remoteInference.ts
+++ b/libs/remix-ai-core/src/inferencers/remote/remoteInference.ts
@@ -10,7 +10,7 @@ export class RemoteInferencer implements ICompletions {
   api_url: string
   completion_url: string
   max_history = 7
-  model_op = RemoteBackendOPModel.DEEPSEEK // default model operation change this to llama if necessary
+  model_op = RemoteBackendOPModel.CODELLAMA // default model operation change this to llama if necessary
   event: EventEmitter
 
   constructor(apiUrl?:string, completionUrl?:string) {
diff --git a/libs/remix-ui/remix-ai/src/lib/components/Default.tsx b/libs/remix-ui/remix-ai/src/lib/components/Default.tsx
index 59239309ed..b5e9291fb1 100644
--- a/libs/remix-ui/remix-ai/src/lib/components/Default.tsx
+++ b/libs/remix-ui/remix-ai/src/lib/components/Default.tsx
@@ -1,84 +1,122 @@
 import React, { useContext, useEffect, useState } from 'react'
 import '../remix-ai.css'
-import { DefaultModels } from '@remix/remix-ai-core';
+import { DefaultModels, GenerationParams } from '@remix/remix-ai-core';
+import { StreamSend, StreamingAdapterObserver } from '@nlux/react';
+import axios from 'axios';
+import { AiChat, useAsStreamAdapter } from '@nlux/react';
+import '@nlux/themes/nova.css';
+
+import { user, assistantAvatar } from './personas';
+const demoProxyServerUrl = 'https://solcoder.remixproject.org';
 
 export const Default = (props) => {
-  const [searchText, setSearchText] = useState('');
-  const [resultText, setResultText] = useState('');
-  const pluginName = 'remixAI'
-  const appendText = (newText) => {
-    setResultText(resultText => resultText + newText);
-  }
 
-  useEffect(() => {
-    const handleResultReady = async (e) => {
-      appendText(e);
-    };
-    if (props.plugin.isOnDesktop ) {
-      props.plugin.on(props.plugin.remixDesktopPluginName, 'onStreamResult', (value) => {
-        handleResultReady(value);
-      })
-    }
-  }, [])
+  const send: StreamSend = async (
+    prompt: string,
+    observer: StreamingAdapterObserver,
+  ) => {
+    console.log(prompt);
+    const response = await props.plugin.call('remixAI', 'solidity_answer', prompt);
+    observer.next(response);
+    observer.complete();
+};
 
+  const adapter = useAsStreamAdapter(send, []);
   return (
-    <div>
-      <div className="remix_ai_plugin_search_container">
-        <input
-          type="text"
-          className="remix_ai_plugin_search-input"
-          placeholder="Search..."
-          value={searchText}
-          onChange={() => console.log('searchText not implememted')}
-        ></input>
-        <button
-          className="remix_ai_plugin_search_button text-ai pl-2 pr-0 py-0 d-flex"
-          onClick={() => console.log('searchText not implememted')}
-        >
-          <i
-            className="fa-solid fa-arrow-right"
-            style={{ color: 'black' }}
-          ></i>
-          <span className="position-relative text-ai text-sm pl-1"
-            style={{ fontSize: "x-small", alignSelf: "end" }}>Search</span>
-        </button>
+    <AiChat
+      adapter={ adapter }
+      personaOptions={{
+        assistant: {
+          name: "Remix AI",
+          tagline: "Your Web3 AI Assistant",
+          avatar: assistantAvatar
+        },
+        user
+      }}
+      conversationOptions={{ layout: 'bubbles' }}
+      displayOptions={{ colorScheme: "dark" }}
+      composerOptions={{ placeholder: "Type your query" }}
+    />
+  );
+};
 
-        <button className="remix_ai_plugin_download_button text-ai pl-2 pr-0 py-0 d-flex"
+// export const Default = (props) => {
+//   const [searchText, setSearchText] = useState('');
+//   const [resultText, setResultText] = useState('');
+//   const pluginName = 'remixAI'
+//   const appendText = (newText) => {
+//     setResultText(resultText => resultText + newText);
+//   }
 
-          onClick={async () => {
-            if (props.plugin.isOnDesktop ) {
-              await props.plugin.call(pluginName, 'downloadModel', DefaultModels()[3]);
-            }
-          }}
-        > Download Model </button>
+//   useEffect(() => {
+//     const handleResultReady = async (e) => {
+//       appendText(e);
+//     };
+//     if (props.plugin.isOnDesktop ) {
+//       props.plugin.on(props.plugin.remixDesktopPluginName, 'onStreamResult', (value) => {
+//         handleResultReady(value);
+//       })
+//     }
+//   }, [])
 
-      </div>
+//   return (
+//     <div>
+//       <div className="remix_ai_plugin_search_container">
+//         <input
+//           type="text"
+//           className="remix_ai_plugin_search-input"
+//           placeholder="Search..."
+//           value={searchText}
+//           onChange={() => console.log('searchText not implememted')}
+//         ></input>
+//         <button
+//           className="remix_ai_plugin_search_button text-ai pl-2 pr-0 py-0 d-flex"
+//           onClick={() => console.log('searchText not implememted')}
+//         >
+//           <i
+//             className="fa-solid fa-arrow-right"
+//             style={{ color: 'black' }}
+//           ></i>
+//           <span className="position-relative text-ai text-sm pl-1"
+//             style={{ fontSize: "x-small", alignSelf: "end" }}>Search</span>
+//         </button>
 
-      <div className="remix_ai_plugin_find_container_internal">
-        <textarea
-          className="remix_ai_plugin_search_result_textbox"
-          rows={10}
-          cols={50}
-          placeholder="Results..."
-          onChange={(e) => {
-            console.log('resultText changed', e.target.value)
-            setResultText(e.target.value)}
-          }
-          value={resultText}
-          readOnly
-        />
-        <button className="remix_ai_plugin_download_button text-ai pl-2 pr-0 py-0 d-flex"
+//         <button className="remix_ai_plugin_download_button text-ai pl-2 pr-0 py-0 d-flex"
 
-          onClick={async () => {
-            props.plugin.call("remixAI", 'initialize', DefaultModels()[1], DefaultModels()[3]);
-          }}
-        > Init Model </button>
-      </div>
-      <div className="remix_ai_plugin_find-part">
-        <a href="#" className="remix_ai_plugin_search_result_item_title">/fix the problems in my code</a>
-        <a href="#" className="remix_ai_plugin_search_result_item_title">/tests add unit tests for my code</a>
-        <a href="#" className="remix_ai_plugin_search_result_item_title">/explain how the selected code works</a>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+//           onClick={async () => {
+//             if (props.plugin.isOnDesktop ) {
+//               await props.plugin.call(pluginName, 'downloadModel', DefaultModels()[3]);
+//             }
+//           }}
+//         > Download Model </button>
+
+//       </div>
+
+//       <div className="remix_ai_plugin_find_container_internal">
+//         <textarea
+//           className="remix_ai_plugin_search_result_textbox"
+//           rows={10}
+//           cols={50}
+//           placeholder="Results..."
+//           onChange={(e) => {
+//             console.log('resultText changed', e.target.value)
+//             setResultText(e.target.value)}
+//           }
+//           value={resultText}
+//           readOnly
+//         />
+//         <button className="remix_ai_plugin_download_button text-ai pl-2 pr-0 py-0 d-flex"
+
+//           onClick={async () => {
+//             props.plugin.call("remixAI", 'initialize', DefaultModels()[1], DefaultModels()[3]);
+//           }}
+//         > Init Model </button>
+//       </div>
+//       <div className="remix_ai_plugin_find-part">
+//         <a href="#" className="remix_ai_plugin_search_result_item_title">/fix the problems in my code</a>
+//         <a href="#" className="remix_ai_plugin_search_result_item_title">/tests add unit tests for my code</a>
+//         <a href="#" className="remix_ai_plugin_search_result_item_title">/explain how the selected code works</a>
+//       </div>
+//     </div>
+//   );
+// }
\ No newline at end of file
diff --git a/package.json b/package.json
index 31668fbca0..3286dd4f3d 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,9 @@
     "@isomorphic-git/lightning-fs": "^4.4.1",
     "@metamask/eth-sig-util": "^7.0.2",
     "@microlink/react-json-view": "^1.23.0",
+    "@nlux/core": "^2.17.1",
+    "@nlux/react": "^2.17.1",
+    "@nlux/themes": "^2.17.1",
     "@openzeppelin/contracts": "^5.0.0",
     "@openzeppelin/upgrades-core": "^1.30.0",
     "@openzeppelin/wizard": "0.4.0",
diff --git a/yarn.lock b/yarn.lock
index 170ac0f36b..ce86a032b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5311,6 +5311,23 @@
     pathval "1.1.1"
     type-detect "4.0.8"
 
+"@nlux/core@2.17.1", "@nlux/core@^2.17.1":
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/@nlux/core/-/core-2.17.1.tgz#18a95e21e5aafae83bf6d515651780497f0f39cc"
+  integrity sha512-hIvOnuENVqWaIg5Co4JtFmHph7Sp0Nj+QixOMdOW9Ou7CjU7HK+maB5koLoayNL64B+wHTtgPN7zBrB8NCSPXw==
+
+"@nlux/react@^2.17.1":
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/@nlux/react/-/react-2.17.1.tgz#e4668e7cbe42dd195ea86a02350c8b15cb8f48f0"
+  integrity sha512-/t6qDAHIefg1vGIthLOtkQxbI4Sh/aL7/eqVuhcoC1w/8NqnvVxwfxR0mkshcIVrKSwHI8Yjav5edZ2yeRBqMw==
+  dependencies:
+    "@nlux/core" "2.17.1"
+
+"@nlux/themes@^2.17.1":
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/@nlux/themes/-/themes-2.17.1.tgz#f991b1b5fcf9595e59d0abeb76f9997876b44784"
+  integrity sha512-spD3QJBSdkF+q45rQFFsUQcR4pTy3OEjQywEP+yc9dHcuPrxIMb0/W/whwiHn1aePGL758lKQH3E/NRHA4aSAw==
+
 "@noble/curves@1.0.0", "@noble/curves@~1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.0.0.tgz#e40be8c7daf088aaf291887cbc73f43464a92932"