ui: make model tip plain text instead of tooltip for better visibility

Author: yash-pouranik

apps/web-dashboard/src/components/CollectionCreatorAgent.jsx

@@ -4,7 +4,6 @@ import { toast } from 'react-hot-toast';
 import { Send, ArrowRight, Bot } from 'lucide-react';
 import SchemaCanvasViewer from './SchemaCanvasViewer';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 
 const SUGGESTIONS = [
   { label: 'E-commerce Platform', prompt: 'Create an e-commerce platform with products, categories, orders, customers, and product reviews' },
@@ -245,30 +244,26 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
             <Bot size={16} className="text-[var(--color-primary)]" />
             <span>AI Schema Assistant</span>
           </h3>
-          <div className="flex items-center gap-2">
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="w-[180px]">
-                    <Select value={selectedModel} onValueChange={setSelectedModel}>
-                      <SelectTrigger className="w-full h-7 text-xs border-[var(--color-border)] bg-[var(--color-bg-input)]">
-                        <SelectValue placeholder="Select Model" />
-                      </SelectTrigger>
-                      <SelectContent className="max-h-[300px]">
-                        {MODELS.map(m => (
-                          <SelectItem key={m} value={m} className="text-xs">
-                            {m}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p className="text-xs">Tip: use llama-3.3-70b-versatile for best results</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+          <div className="flex flex-col items-end gap-1">
+            <div className="flex items-center gap-2">
+              <div className="w-[180px]">
+                <Select value={selectedModel} onValueChange={setSelectedModel}>
+                  <SelectTrigger className="w-full h-7 text-xs border-[var(--color-border)] bg-[var(--color-bg-input)]">
+                    <SelectValue placeholder="Select Model" />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-[300px]">
+                    {MODELS.map(m => (
+                      <SelectItem key={m} value={m} className="text-xs">
+                        {m}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <span className="text-[10px] text-[var(--color-text-muted)] italic mr-1">
+              Tip: use llama-3.3-70b for best results
+            </span>
           </div>
         </div>