Merge pull request #6123 from ethereum/aichat-ui-update

AiChat UI/UX Update

Author: joeizang

.env.local

@@ -6,4 +6,4 @@ WALLET_CONNECT_PROJECT_ID=<project_id>
 NOIR_COMPILER_BASE_URL_DEV=<dev_base_endpoint>
 NOIR_COMPILER_BASE_URL_PROD=<prod_base_endpoint>
 NOIR_COMPILER_WS_URL_DEV=<dev_websocket_url>
-NOIR_COMPILER_WS_URL_PROD=<prod_websocket_url>
+NOIR_COMPILER_WS_URL_PROD=<prod_websocket_url>

apps/remix-ide-e2e/src/commands/assistantClearChat.ts

@@ -2,24 +2,24 @@ import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
 class AssistantClearChat extends EventEmitter {
-    command(this: NightwatchBrowser): NightwatchBrowser {
-        this.api.perform((done) => {
-            clearChat(this.api, () => {
-                done()
-                this.emit('complete')
-            })
-        })
-        return this
-    }
+  command(this: NightwatchBrowser): NightwatchBrowser {
+    this.api.perform((done) => {
+      clearChat(this.api, () => {
+        done()
+        this.emit('complete')
+      })
+    })
+    return this
+  }
 }
 
 function clearChat(browser: NightwatchBrowser, done: VoidFunction) {
-    browser
-        .execute(function () {
-            (window as any).remixAIChat.current.clearChat();
-        }, [])
+  browser
+    .execute(function () {
+      (window as any).remixAIChat.current.clearChat();
+    }, [])
 
-    done()
+  done()
 }
 
 module.exports = AssistantClearChat;

apps/remix-ide-e2e/src/commands/assistantSetProvider.ts

@@ -30,7 +30,7 @@ function setAssistant(browser: NightwatchBrowser, provider: string, done: VoidFu
       selector: "//*[@data-id='remix-ai-streaming' and @data-streaming='false']",
     })
     //.pause()
-    .perform(() => done())  
+    .perform(() => done())
 }
 
 module.exports = SetAssistantProvider

apps/remix-ide-e2e/src/helpers/init.ts

@@ -8,7 +8,6 @@ type LoadPlugin = {
   url: string
 }
 
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function (browser: NightwatchBrowser, callback: VoidFunction, url?: string, preloadPlugins = true, loadPlugin?: LoadPlugin, hideToolTips: boolean = true): void {
   browser

apps/remix-ide-e2e/src/tests/ai_panel.test.ts

@@ -81,7 +81,7 @@ module.exports = {
         locateStrategy: 'xpath',
         timeout: 120000
       })
-      .waitForElementPresent('*[data-id="remix-ai-assistant-ready"]')
+      // .waitForElementPresent('*[data-id="remix-ai-assistant-ready"]')
       .assistantAddContext('currentFile')
       .waitForElementVisible({
         locateStrategy: 'xpath',
@@ -171,8 +171,8 @@ module.exports = {
         locateStrategy: 'xpath',
         timeout: 120000
       })
-      .waitForElementVisible('*[data-id="composer-ai-workspace-generate"]')
-      .click('*[data-id="composer-ai-workspace-generate"]')
+      .waitForElementVisible('*[data-id="remix-ai-workspace-generate"]')
+      .click('*[data-id="remix-ai-workspace-generate"]')
       .waitForElementVisible('*[data-id="generate-workspaceModalDialogModalBody-react"]')
       .click('*[data-id="modalDialogCustomPromp"]')
       .setValue('*[data-id="modalDialogCustomPromp"]', 'a simple ERC20 contract')
@@ -268,4 +268,4 @@ module.exports = {
       .clickLaunchIcon('filePanel')
       .waitForElementNotVisible('*[data-id="remix-ai-assistant"]', 5000)
   },
-}
+}

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -21,6 +21,7 @@
   --danger: #b84040;
   --light: #2a2c3f;
   --dark: #222336;
+  --dim: #47485c;
   --text: #babbcc;
   --text-background: #222336;
   --text-bg-mark: #8388b2;

libs/remix-ui/remix-ai-assistant/src/components/chat.tsx

@@ -3,6 +3,8 @@ import remarkGfm from "remark-gfm"
 import copy from "copy-to-clipboard"
 import { ChatMessage, assistantAvatar } from "../lib/types"
 import React from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 const DEFAULT_SUGGESTIONS = [
   'Explain what a modifier is',
@@ -19,6 +21,29 @@ export interface ChatHistoryComponentProps {
   historyRef: React.RefObject<HTMLDivElement>
 }
 
+const AiChatIntro = (props) => {
+  return (
+    <div className="assistant-landing d-flex flex-column align-items-center justify-content-center text-center px-3 h-100">
+      <img src={assistantAvatar} alt="RemixAI logo" style={{ width: '120px' }} className="mb-3" />
+      <h5 className="mb-2">RemixAI</h5>
+      <p className="mb-4" style={{ fontSize: '1.1rem' }}>
+            RemixAI provides you personalized guidance as you build. It can break down concepts,
+            answer questions about blockchain technology and assist you with your smart contracts.
+      </p>
+      {DEFAULT_SUGGESTIONS.map((s, index) => (
+        <button
+          key={s}
+          data-id={`remix-ai-assistant-starter-${index}`}
+          className="btn btn-secondary mb-2 w-100 text-left"
+          onClick={() => props.sendPrompt(s)}
+        >
+          <i className="fa-kit fa-remixai mr-2"></i>{s}
+        </button>
+      ))}
+    </div>
+  )
+}
+
 export const ChatHistoryComponent: React.FC<ChatHistoryComponentProps> = ({
   messages,
   isStreaming,
@@ -29,34 +54,17 @@ export const ChatHistoryComponent: React.FC<ChatHistoryComponentProps> = ({
   return (
     <div
       ref={historyRef}
-      className="d-flex flex-column flex-grow-1 overflow-y-auto"
+      className="d-flex flex-column overflow-y-auto border-box-sizing preserve-wrap w-100"
     >
       {messages.length === 0 ? (
-        <div className="assistant-landing d-flex flex-column align-items-center justify-content-center text-center px-3 h-100">
-          <img src={assistantAvatar} alt="RemixAI logo" style={{ width: '120px' }} className="mb-3" />
-          <h5 className="mb-2">RemixAI</h5>
-          <p className="mb-4" style={{ fontSize: '1.1rem' }}>
-            RemixAI provides you personalized guidance as you build. It can break down concepts,
-            answer questions about blockchain technology and assist you with your smart contracts.
-          </p>
-          {DEFAULT_SUGGESTIONS.map((s, index) => (
-            <button
-              key={s}
-              data-id={`remix-ai-assistant-starter-${index}`}
-              className="btn btn-secondary mb-2 w-100 text-left"
-              onClick={() => sendPrompt(s)}
-            >
-              <i className="fa-kit fa-remixai mr-2"></i>{s}
-            </button>
-          ))}
-        </div>
+        <AiChatIntro sendPrompt={sendPrompt} />
       ) : (
         messages.map(msg => {
           const bubbleClass =
             msg.role === 'user' ? 'bubble-user bg-light' : 'bubble-assistant bg-light'
 
           return (
-            <div key={msg.id} className="chat-row d-flex mb-2">
+            <div key={msg.id} className="chat-row d-flex mb-2 w-100">
               {/* Avatar for assistant */}
               {msg.role === 'assistant' && (
                 <img
@@ -67,7 +75,7 @@ export const ChatHistoryComponent: React.FC<ChatHistoryComponentProps> = ({
               )}
 
               {/* Bubble */}
-              <div data-id="ai-response-chat-bubble-section" className="flex-grow-1 w-25 mr-1">
+              <div data-id="ai-response-chat-bubble-section" className="overflow-y-scroll w-100 mr-1">
                 <div className={`chat-bubble p-2 rounded ${bubbleClass}`}>
                   {msg.role === 'user' && (
                     <small className="text-uppercase fw-bold text-secondary d-block mb-1">
@@ -154,7 +162,7 @@ export const ChatHistoryComponent: React.FC<ChatHistoryComponentProps> = ({
               </div>
             </div>
           )
-        })
+        }) //end of messages render
       )}
       {isStreaming && (
         <div className="text-center my-2">

libs/remix-ui/remix-ai-assistant/src/components/contextOptMenu.tsx

@@ -0,0 +1,35 @@
+import React, { Dispatch } from 'react'
+import { AiAssistantType, AiContextType, groupListType } from '../types/componentTypes'
+
+export interface GroupListMenuProps {
+  setChoice: Dispatch<React.SetStateAction<AiContextType | AiAssistantType | any>>
+  choice: AiContextType | AiAssistantType | any
+  setShowOptions: Dispatch<React.SetStateAction<boolean>>
+  groupList: groupListType[]
+}
+
+export default function GroupListMenu(props: GroupListMenuProps) {
+
+  return (
+    <div className="btn-group-vertical">
+      {props.groupList.map((item, index) => (
+        <button
+          key={`${item.label}-${index}`}
+          className="btn btn-light"
+          data-id={item.dataId}
+          onClick={() => {
+            props.setChoice(item.stateValue)
+            props.setShowOptions(false)
+          }}
+        >
+          <div className="d-flex flex-column small text-left">
+            <span className="font-semibold text-white mb-1">{item.label}</span>
+            <div className="d-flex justify-content-between">
+              <span className="text-light mr-2 text-wrap">{item.bodyText}</span>{ props.choice === item.stateValue && <span className={item.icon}></span> }
+            </div>
+          </div>
+        </button>
+      ))}
+    </div>
+  )
+}