Merge pull request #6172 from ethereum/aichat-patch-001

Remix AI Chat UI Patch

Author: yann300

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

@@ -24,18 +24,26 @@ export interface ChatHistoryComponentProps {
 
 const AiChatIntro = (props) => {
   return (
-    <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" />
+    <div className="assistant-landing d-flex flex-column mx-1 align-items-center justify-content-center text-center h-100 w-100">
+      <img src={assistantAvatar} alt="RemixAI logo" style={{ width: '120px' }} className="mb-3 container-img" />
       <h5 className="mb-2">RemixAI</h5>
       <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: '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 className="d-flex flex-row align-items-center">
+          <span className="font-italic m-1">{`<prompt>: `}</span>
+          <span>ask your question</span></div>
+        <div className="d-flex flex-row align-items-center">
+          <span className="font-italic m-1">{`/w <prompt>: `}</span>
+          <span>modify your code</span></div>
+        <div className="d-flex flex-row align-items-center">
+          <span className="font-italic m-1">{`/c <prompt>: `}</span>
+          <span>continue fixing compilation</span></div>
+        <div className="d-flex flex-row align-items-center">
+          <span className="font-italic m-1">{`/g <prompt>: `}</span>
+          <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

@@ -30,6 +30,7 @@ export interface PromptAreaProps {
   aiContextGroupList: groupListType[]
   aiAssistantGroupList: groupListType[]
   textareaRef?: React.RefObject<HTMLTextAreaElement>
+  maximizePanel: () => Promise<void>
 }
 
 const _paq = (window._paq = window._paq || [])
@@ -57,7 +58,8 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
   modelBtnRef,
   aiContextGroupList,
   aiAssistantGroupList,
-  textareaRef
+  textareaRef,
+  maximizePanel
 }) => {
 
   return (
@@ -78,7 +80,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
       )}
 
       <div
-        className="prompt-area d-flex flex-column gap-2 w-100 p-3 border border-text bg-light align-self-start"
+        className="prompt-area d-flex flex-column mx-1 p-2 border border-text bg-light"
       >
         <div className="d-flex justify-content-between mb-3 border border-right-0 border-left-0 border-top-0 border-bottom pb-1">
           <button
@@ -120,6 +122,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
             disabled={isStreaming}
             onFocus={() => {
               dispatchActivity('typing', input)
+              maximizePanel()
             }}
             onChange={e => {
               dispatchActivity('typing', e.target.value)

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

@@ -52,6 +52,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
   const modelBtnRef = useRef(null)
   const contextBtnRef = useRef(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const aiChatRef = useRef<HTMLDivElement>(null)
 
   useOnClickOutside([modelBtnRef, contextBtnRef], () => setShowAssistantOptions(false))
   useOnClickOutside([modelBtnRef, contextBtnRef], () => setShowContextOptions(false))
@@ -468,9 +469,17 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
     }
   }, [messages])
 
+  const maximizePanel = async () => {
+    await props.plugin.call('layout', 'maximisePinnedPanel')
+  }
+
   return (
     <div
-      className="d-flex flex-column h-100 mx-3 "
+      className="d-flex flex-column h-100 w-100"
+      ref={aiChatRef}
+      onBlur={async () => {
+        await props.plugin.call('layout', 'resetPinnedPanel')
+      }}
     >
       <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>
@@ -488,12 +497,12 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
           historyRef={historyRef}
         />
       </section>
-      <section id="remix-ai-prompt-area" className=" mt-1" style={{ flex: 1 }}
+      <section id="remix-ai-prompt-area" className="mt-1" style={{ flex: 1 }}
       >
         {showAssistantOptions && (
           <div
-            className="pt-2 mb-2 z-3 bg-light border border-text"
-            style={{ borderRadius: '8px', left: `${calcAndConvertToDvw(getBoundingRect(modelBtnRef).left)}dvw`, right: '0px', bottom: '75px', height: '235px', width: '300px', }}
+            className="pt-2 mb-2 z-3 bg-light border border-text w-75"
+            style={{ borderRadius: '8px' }}
           >
             <div className="text-uppercase ml-2 mb-2 small">AI Assistant Provider</div>
             <GroupListMenu
@@ -506,6 +515,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
         )}
         <PromptArea
           input={input}
+          maximizePanel={maximizePanel}
           setInput={setInput}
           isStreaming={isStreaming}
           handleSend={handleSend}

libs/remix-ui/remix-ai-assistant/src/css/remix-ai-assistant.css

@@ -301,3 +301,12 @@
 .border-box-sizing {
   box-sizing: border-box;
 }
+
+@media (max-width: 1280px) {
+  @container container-img (inline-size < 150px) {
+    .container-img {
+      width: 80px;
+      min-height: 80px;
+    }
+  }
+}