fix: address issues in model pull and chat API

- Refactored model pull logic to improve error handling and user feedback.
- Enhanced chat API to ensure better performance and reliability during message fetching.
- Updated UI components for a more intuitive user experience when interacting with models and messages.

components/chat/chat-input.tsx

@@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Send, Square } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  onStop: () => void;
+  isLoading: boolean;
+}
+
+export function ChatInput({ onSend, onStop, isLoading }: ChatInputProps) {
+  const [input, setInput] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleSend = () => {
+    if (input.trim() && !isLoading) {
+      onSend(input);
+      setInput("");
+    }
+  };
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [input]);
+
+  return (
+    <div className="p-4 border-t bg-background">
+      <div className="relative flex items-end gap-2 max-w-3xl mx-auto">
+        <Textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Digite sua mensagem..."
+          className="min-h-[50px] max-h-[200px] resize-none pr-12 py-3"
+          rows={1}
+        />
+        <div className="absolute right-2 bottom-2">
+          {isLoading ? (
+            <Button size="icon" variant="destructive" onClick={onStop} className="h-8 w-8">
+              <Square className="h-4 w-4 fill-current" />
+            </Button>
+          ) : (
+            <Button 
+              size="icon" 
+              onClick={handleSend} 
+              disabled={!input.trim()} 
+              className="h-8 w-8"
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+      <div className="text-xs text-center text-muted-foreground mt-2">
+        OllaHub pode cometer erros. Verifique informações importantes.
+      </div>
+    </div>
+  );
+}
+

components/chat/chat-message.tsx

@@ -0,0 +1,33 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from "@/lib/utils";
+import { Message } from "@/hooks/use-chat";
+import { Bot, User } from "lucide-react";
+
+export function ChatMessage({ message }: { message: Message }) {
+  const isUser = message.role === 'user';
+
+  return (
+    <div className={cn(
+      "flex w-full gap-4 p-6",
+      isUser ? "bg-background" : "bg-muted/30"
+    )}>
+      <div className="flex-shrink-0 mt-1">
+        <div className={cn(
+          "w-8 h-8 rounded-sm flex items-center justify-center",
+          isUser ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"
+        )}>
+          {isUser ? <User className="w-5 h-5" /> : <Bot className="w-5 h-5" />}
+        </div>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <div className="prose dark:prose-invert max-w-none break-words">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {message.content}
+          </ReactMarkdown>
+        </div>
+      </div>
+    </div>
+  );
+}
+

components/chat/prompt-generator.tsx

@@ -0,0 +1,114 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Sparkles, Loader2 } from "lucide-react";
+import { useState, useEffect } from "react";
+import { usePromptGenerator } from "@/hooks/use-prompt-generator";
+import { useLocalModels } from "@/hooks/use-local-models";
+
+interface PromptGeneratorDialogProps {
+  defaultModel: string;
+  onPromptGenerated: (prompt: string) => void;
+}
+
+export function PromptGeneratorDialog({ defaultModel, onPromptGenerated }: PromptGeneratorDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [goal, setGoal] = useState("");
+  const [selectedModel, setSelectedModel] = useState(defaultModel);
+  const { generatePrompt, isGenerating } = usePromptGenerator();
+  const { models } = useLocalModels();
+
+  // Set default model when dialog opens or defaultModel changes
+  useEffect(() => {
+    if (defaultModel) {
+      setSelectedModel(defaultModel);
+    }
+  }, [defaultModel]);
+
+  // Try to set specific default if available, otherwise fallback
+  useEffect(() => {
+    const preferredModel = "llama3.2-abliterate:3b";
+    const hasPreferred = models.some(m => m.name === preferredModel);
+    if (hasPreferred && !selectedModel) {
+      setSelectedModel(preferredModel);
+    }
+  }, [models, selectedModel]);
+
+  const handleGenerate = async () => {
+    if (!goal.trim() || !selectedModel) return;
+    
+    try {
+      const prompt = await generatePrompt(goal, selectedModel);
+      onPromptGenerated(prompt);
+      setOpen(false);
+      setGoal("");
+    } catch (error) {
+      // Error handling usually done in hook or global toast
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-6 w-6 text-yellow-500 hover:text-yellow-600 hover:bg-yellow-100 dark:hover:bg-yellow-900/20" title="Gerar com IA">
+          <Sparkles className="w-4 h-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Gerador de Prompts</DialogTitle>
+          <DialogDescription>
+            Descreva o que você quer que a IA faça, e nós criaremos um System Prompt otimizado para você.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Modelo para Geração</label>
+            <Select value={selectedModel} onValueChange={setSelectedModel}>
+              <SelectTrigger>
+                <SelectValue placeholder="Selecione um modelo..." />
+              </SelectTrigger>
+              <SelectContent>
+                {models.map(m => (
+                  <SelectItem key={m.name} value={m.name}>{m.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">
+              Recomendado: Modelos com boa capacidade de instrução (ex: Llama 3, Mistral).
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Seu Objetivo</label>
+            <Textarea
+              value={goal}
+              onChange={(e) => setGoal(e.target.value)}
+              placeholder="Ex: Quero um assistente especialista em Python que explique conceitos complexos de forma simples..."
+              className="min-h-[150px]"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => setOpen(false)}>Cancelar</Button>
+          <Button onClick={handleGenerate} disabled={isGenerating || !goal.trim() || !selectedModel}>
+            {isGenerating ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Gerando...
+              </>
+            ) : (
+              <>
+                <Sparkles className="mr-2 h-4 w-4" />
+                Gerar Prompt
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/chat/system-panel.tsx

@@ -0,0 +1,105 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { Trash2, HardDrive, Cpu, Database } from "lucide-react";
+import { useSystemMonitor } from "@/hooks/use-system-monitor";
+import { useLocalModels } from "@/hooks/use-local-models";
+
+export function SystemPanel() {
+  const stats = useSystemMonitor();
+  const { models, deleteModel, refresh } = useLocalModels();
+
+  const ramUsagePercent = stats 
+    ? (stats.memory_used / stats.memory_total) * 100 
+    : 0;
+
+  const formatBytes = (bytes: number) => {
+    const gb = bytes / (1024 * 1024 * 1024);
+    return `${gb.toFixed(1)} GB`;
+  };
+
+  return (
+    <div className="h-full overflow-y-auto p-4 space-y-6">
+      {/* Hardware Stats */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+          Monitoramento
+        </h3>
+        
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <Cpu className="w-4 h-4" /> Processador
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex justify-between text-xs mb-1">
+              <span>Uso</span>
+              <span>{stats?.cpu_usage.toFixed(1)}%</span>
+            </div>
+            <Progress value={stats?.cpu_usage || 0} className="h-2" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <HardDrive className="w-4 h-4" /> Memória RAM
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex justify-between text-xs mb-1">
+              <span>{stats ? formatBytes(stats.memory_used) : '-'}</span>
+              <span>{stats ? formatBytes(stats.memory_total) : '-'}</span>
+            </div>
+            <Progress value={ramUsagePercent} className="h-2" />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Models List */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+            Modelos Instalados
+          </h3>
+          <Button variant="ghost" size="sm" onClick={refresh} className="h-6 text-xs">
+            Atualizar
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          {models.map((model) => (
+            <Card key={model.id} className="overflow-hidden">
+              <CardContent className="p-3 flex items-center justify-between">
+                <div className="min-w-0">
+                  <div className="font-medium text-sm truncate" title={model.name}>
+                    {model.name}
+                  </div>
+                  <div className="text-xs text-muted-foreground flex items-center gap-2">
+                    <Database className="w-3 h-3" />
+                    {model.size}
+                  </div>
+                </div>
+                <Button 
+                  variant="ghost" 
+                  size="icon" 
+                  className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                  onClick={() => deleteModel(model.name)}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+          {models.length === 0 && (
+            <div className="text-center text-sm text-muted-foreground py-4">
+              Nenhum modelo encontrado.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+