fix context menu and model selection menu

Author: ci-bot

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

@@ -6,6 +6,7 @@ export interface GroupListMenuProps {
   choice: AiContextType | AiAssistantType | any
   setShowOptions: Dispatch<React.SetStateAction<boolean>>
   groupList: groupListType[]
+  themeTracker?: any
 }
 
 export default function GroupListMenu(props: GroupListMenuProps) {
@@ -15,7 +16,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 ${props.themeTracker?.name === 'Dark' ? 'border border-dark' : ''}`}
           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)
@@ -705,6 +715,7 @@ export const RemixUiRemixAiAssistant = React.forwardRef<
               setChoice={handleModelSelection}
               setShowOptions={setShowModelOptions}
               choice={selectedModel}
+              themeTracker={themeTracker}
               groupList={availableModels.map(model => ({
                 label: model,
                 bodyText: `Use ${model} model`,