Merge branch 'master' into ai_textboxes_focus

Author: joeizang

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

@@ -84,17 +84,19 @@ module.exports = {
       .assistantAddContext('currentFile')
       .waitForElementVisible({
         locateStrategy: 'xpath',
-        selector: `//*[contains(@class,"aiContext-file") and contains(.,"Untitled.sol")]`
+        selector: '//*[@data-id="composer-ai-add-context"]'
       })
+      .assert.containsText('*[data-id="composer-ai-add-context"]', 'Current File')
   },
   'Should add workspace as context to the AI assistant #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementPresent('*[data-id="remix-ai-assistant-ready"]')
       .assistantAddContext('workspace')
       .waitForElementVisible({
         locateStrategy: 'xpath',
-        selector: '//*[contains(@class,"aiContext-file") and contains(.,"@workspace")]'
+        selector: '//*[@data-id="composer-ai-add-context"]'
       })
+      .assert.containsText('*[data-id="composer-ai-add-context"]', 'Workspace')
   },
 
   'Should add opened files as context to the AI assistant #group1': function (browser: NightwatchBrowser) {
@@ -112,8 +114,9 @@ module.exports = {
       .assistantAddContext('openedFiles')
       .waitForElementVisible({
         locateStrategy: 'xpath',
-        selector: '//*[contains(@class,"aiContext-file") and contains(.,"anotherFile.sol")]'
+        selector: '//*[@data-id="composer-ai-add-context"]'
       })
+      .assert.containsText('*[data-id="composer-ai-add-context"]', 'Open Files')
   },
 
   'Should generate new workspace contract code with the AI assistant #group1': function (browser: NightwatchBrowser) {

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

@@ -24,17 +24,18 @@ export interface ChatHistoryComponentProps {
 
 const AiChatIntro = (props) => {
   return (
-    <div className="assistant-landing d-flex flex-column align-items-center justify-content-center text-center px-3 h-100">
+    <div className="assistant-landing d-flex flex-column align-items-center justify-content-center text-center px-1 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' }}>
+      <p className="mb-4" style={{ fontSize: '0.9rem' }}>
             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>
-      <div className="d-flex flex-column" style={{ fontSize: '1rem' }}>
-        <div className="d-flex flex-row align-items-center"><p className="font-italic m-1">{`/w <prompt>: `}</p><span>to modify</span></div>
-        <div className="d-flex flex-row align-items-center"><p className="font-italic m-1">{`/c <prompt>: `}</p><span>to continue</span></div>
-        <div className="d-flex flex-row align-items-center"><p className="font-italic m-1 mb-2">{`/g <prompt>: `}</p><span>to generate</span></div>
+      <div className="d-flex flex-column" style={{ fontSize: '0.9rem' }}>
+        <div className="d-flex flex-row align-items-center"><p className="font-italic m-1">{`<prompt>: `}</p><span>ask your question</span></div>
+        <div className="d-flex flex-row align-items-center"><p className="font-italic m-1">{`/w <prompt>: `}</p><span>modify your code</span></div>
+        <div className="d-flex flex-row align-items-center"><p className="font-italic m-1">{`/c <prompt>: `}</p><span>continue fixing compilation</span></div>
+        <div className="d-flex flex-row align-items-center"><p className="font-italic m-1 mb-2">{`/g <prompt>: `}</p><span>generate a new workspace</span></div>
       </div>
       <div className="d-flex flex-column mt-3">
         {DEFAULT_SUGGESTIONS.map((s, index) => (

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

@@ -64,7 +64,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
     <>
       {showContextOptions && (
         <div
-          className="bg-light mb-1 p-2 border border-text"
+          className="bg-light mb-1 p-2 border border-text w-75"
           style={{ borderRadius: '8px' }}
         >
           <div className="text-uppercase ml-2 mb-2">Context</div>
@@ -87,7 +87,10 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
             className="btn btn-dim btn-sm text-secondary small font-weight-light border border-text rounded"
             ref={contextBtnRef}
           >
-          @Add context
+            <span>{}</span>{contextChoice === 'none' && <span data-id="aiContext-file">{'@ Add Context'}</span>}
+            {contextChoice === 'workspace' && <span data-id="aiContext-workspace">{'Workspace'}</span>}
+            {contextChoice === 'opened' && <span data-id="aiContext-opened">{'Open Files'}</span>}
+            {contextChoice === 'current' && <span data-id="aiContext-current">{'Current File'}</span>}
           </button>
 
           <div className="d-flex justify-content-center align-items-center">
@@ -157,7 +160,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
             </button> */}
           </div>
         </div>
-        {contextChoice !== 'none' && contextFiles.length > 0 && (
+        {/* {contextChoice !== 'none' && contextFiles.length > 0 && (
           <div className="mt-2 d-flex flex-wrap gap-1 overflow-y-auto" style={{ maxHeight: '110px' }}>
             {contextFiles.slice(0, 6).map(f => {
               const name = f.split('/').pop()
@@ -183,7 +186,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
               </span>
             )}
           </div>
-        )}
+        )} */}
       </div>
     </>
   )

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

@@ -472,7 +472,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
     <div
       className="d-flex flex-column h-100 mx-3 "
     >
-      <section id="remix-ai-chat-history" className="h-83 d-flex flex-column align-items-center p-2" style={{ flex: 7, overflowY: 'scroll' }} ref={chatHistoryRef}>
+      <section id="remix-ai-chat-history" className="h-83 d-flex flex-column align-items-center p-2 overflow-x-hidden" style={{ flex: 7, overflowY: 'scroll' }} ref={chatHistoryRef}>
         <div data-id="remix-ai-assistant-ready"></div>
         {/* hidden hook for E2E tests: data-streaming="true|false" */}
         <div