Merge pull request #6382 from remix-project-org/joe-patch-013

Fix Remix AI Assistant style issues

Author: joeizang

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

@@ -15,7 +15,7 @@ export default function GroupListMenu(props: GroupListMenuProps) {
       {props.groupList.map((item, index) => (
         <button
           key={`${item.label}-${index}`}
-          className="btn btn-light"
+          className={`btn btn-light border border-0`}
           data-id={item.dataId}
           onClick={() => {
             props.setChoice(item.stateValue)

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

@@ -118,7 +118,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
             <div className="btn-group btn-group-sm" role="group">
               <button
                 type="button"
-                className={`btn ${aiMode === 'ask' ? 'btn-primary' : 'btn-outline-secondary'} px-2`}
+                className={`btn btn-sm ${aiMode === 'ask' ? 'btn-primary' : 'btn-outline-secondary'} px-2`}
                 onClick={() => {
                   setAiMode('ask')
                   _paq.push(['trackEvent', 'remixAI', 'ModeSwitch', 'ask'])
@@ -129,7 +129,7 @@ export const PromptArea: React.FC<PromptAreaProps> = ({
               </button>
               <button
                 type="button"
-                className={`btn ${aiMode === 'edit' ? 'btn-primary' : 'btn-outline-secondary'} px-2`}
+                className={`btn btn-sm ${aiMode === 'edit' ? 'btn-primary' : 'btn-outline-secondary'} px-2`}
                 onClick={() => {
                   setAiMode('edit')
                   _paq.push(['trackEvent', 'remixAI', 'ModeSwitch', 'edit'])

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

@@ -52,6 +52,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
   const [selectedModel, setSelectedModel] = useState<string | null>(null)
   const [isOllamaFailureFallback, setIsOllamaFailureFallback] = useState(false)
   const [aiMode, setAiMode] = useState<'ask' | 'edit'>('ask')
+  const [themeTracker, setThemeTracker] = useState(null)
 
   const historyRef = useRef<HTMLDivElement | null>(null)
   const modelBtnRef = useRef(null)
@@ -205,6 +206,15 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
   //   fetchAssistantChoice()
   // }, [props.plugin])
 
+  useEffect(() => {
+    props.plugin.on('theme', 'themeChanged', (theme) => {
+      setThemeTracker(theme)
+    })
+    return () => {
+      props.plugin.off('theme', 'themeChanged')
+    }
+  })
+
   // bubble messages up to parent
   useEffect(() => {
     props.onMessagesChange?.(messages)