AiChat UI/UX Update

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

@@ -0,0 +1,58 @@
+import React, { Dispatch } from 'react'
+import { AiContextType, groupListType } from '../types/componentTypes'
+
+export interface ContextOptMenuProps {
+  setContextChoice: Dispatch<React.SetStateAction<AiContextType>>
+  contextChoice: AiContextType
+  setShowContextOptions: Dispatch<React.SetStateAction<boolean>>
+}
+
+export default function ContextOptMenu(props: ContextOptMenuProps) {
+  const groupList: groupListType[] = [
+    {
+      label: 'None',
+      bodyText: 'Assistant will automatically decide the context',
+      icon: 'fa-solid fa-check',
+      stateValue: 'none'
+    },
+    {
+      label: 'Current file',
+      bodyText: 'Add the current file in the editor as context',
+      icon: 'fa-solid fa-check',
+      stateValue: 'current'
+    },
+    {
+      label: 'All opened files',
+      bodyText: 'Adds all files opened in the editor as context',
+      icon: 'fa-solid fa-check',
+      stateValue: 'opened'
+    },
+    {
+      label: 'Workspace',
+      bodyText: 'Uses the current workspace as context',
+      icon: 'fa-solid fa-check',
+      stateValue: 'workspace'
+    }
+  ]
+
+  return (
+    <div className="btn-group-vertical w-100">
+      {groupList.map((item, index) => (
+        <button
+          className="btn btn-light"
+          onClick={() => {
+            props.setContextChoice(item.stateValue)
+            props.setShowContextOptions(false)
+          }}
+        >
+          <div className="d-flex flex-column small text-left">
+            <span className="font-semibold text-white mb-1">{item.label}</span>
+            <div className="w-100">
+              <span className="text-light mr-2">{item.bodyText}</span>{ props.contextChoice === item.stateValue && <span className={item.icon}></span> }
+            </div>
+          </div>
+        </button>
+      ))}
+    </div>
+  )
+}

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

@@ -1,5 +1,6 @@
 import { ActivityType } from "../lib/types"
 import React from 'react'
+import ContextOptMenu from "./contextOptMenu"
 
 // PromptArea component
 export interface PromptAreaProps {
@@ -47,10 +48,12 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
     <>
       {showContextOptions && (
         <div
-          className=" w-100 bg-dark p-2 border border-text border-bottom-0 rounded"
+          className=" w-90 bg-light mb-1 p-2 border border-text"
+          style={{ borderRadius: '8px'
+          }}
         >
-          <div className="text-uppercase ml-2 mb-2">Add Context Files</div>
-          <div className="d-flex ml-2 custom-control custom-radio">
+          <div className="text-uppercase ml-2 mb-2">Context</div>
+          {/* <div className="d-flex ml-2 custom-control custom-radio">
             <input
               className="custom-control-input"
               type="radio"
@@ -109,7 +112,12 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
             <label className="form-check-label custom-control-label" data-id="workspace-context-option" htmlFor="ctx-workspace">
               Workspace
             </label>
-          </div>
+          </div> */}
+          <ContextOptMenu
+            setContextChoice={setContextChoice}
+            setShowContextOptions={setShowContextOptions}
+            contextChoice={contextChoice}
+          />
         </div>
       )}
 
@@ -120,18 +128,17 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
           <button
             onClick={handleAddContext}
             data-id="composer-ai-add-context"
-            className="btn btn-dark btn-sm text-secondary"
+            className="btn btn-text btn-sm text-secondary small"
           >
-          Add context
+          @Add context
           </button>
 
-          <button
-            onClick={handleGenerateWorkspace}
-            className="btn btn-dark btn-sm text-secondary"
+          <span
+            className="bg-info p-1 text-ai small"
             data-id="composer-ai-workspace-generate"
           >
-          @Generate Workspace
-          </button>
+          Ai Beta
+          </span>
         </div>
         <div className="ai-chat-input d-flex flex-column">
           <input

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

@@ -8,6 +8,7 @@ import { ModalTypes } from '@remix-ui/app'
 import { PromptArea } from './prompt'
 import { ChatHistoryComponent } from './chat'
 import { ActivityType, ChatMessage } from '../lib/types'
+import { AiContextType } from '../types/componentTypes'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -40,7 +41,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
   const [assistantChoice, setAssistantChoice] = useState<'openai' | 'mistralai' | 'anthropic'>(
     null
   )
-  const [contextChoice, setContextChoice] = useState<'none' | 'current' | 'opened' | 'workspace'>(
+  const [contextChoice, setContextChoice] = useState<AiContextType>(
     'none'
   )
   const historyRef = useRef<HTMLDivElement | null>(null)

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

@@ -288,4 +288,12 @@
 
 [data-id="remix-ai-streaming"] {
   display: none !important;
+}
+
+.w-85 {
+  width: 85% !important;
+}
+
+.w-90 {
+  width: 90% !important;
 }

libs/remix-ui/remix-ai-assistant/src/types/componentTypes.ts

@@ -0,0 +1,8 @@
+export type AiContextType = "none" | "current" | "opened" | "workspace"
+
+export type groupListType = {
+      label: string,
+      bodyText: string,
+      icon: 'fa-solid fa-check',
+      stateValue: AiContextType
+    }