Update chat layout to match web version

- Client messages on left with white background and border
- Agent messages on right with black background
- Added circular avatars (User icon for client, Headphones for agent)
- Improved spacing and visual consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/desktop/src/chat/ChatWidget.tsx

@@ -4,7 +4,7 @@ import { listen } from "@tauri-apps/api/event"
 import { Store } from "@tauri-apps/plugin-store"
 import { appLocalDataDir, join } from "@tauri-apps/api/path"
 import { open } from "@tauri-apps/plugin-dialog"
-import { Send, X, Minus, Loader2, Headphones, Paperclip, FileText, Image as ImageIcon, File } from "lucide-react"
+import { Send, X, Minus, Loader2, Headphones, Paperclip, FileText, Image as ImageIcon, File, User } from "lucide-react"
 import type { ChatMessage, ChatMessagesResponse, SendMessageResponse } from "./types"
 
 const STORE_FILENAME = "machine-agent.json"
@@ -381,20 +381,34 @@ export function ChatWidget({ ticketId }: ChatWidgetProps) {
             </p>
           </div>
         ) : (
-          <div className="space-y-3">
-            {messages.map((msg) => (
+          <div className="space-y-4">
+            {messages.map((msg) => {
+              // No desktop: isFromMachine=true significa mensagem do cliente (maquina)
+              // Layout igual à web: cliente à esquerda, agente à direita
+              const isAgent = !msg.isFromMachine
+              return (
                 <div
                   key={msg.id}
-                className={`flex ${msg.isFromMachine ? "justify-end" : "justify-start"}`}
+                  className={`flex gap-2 ${isAgent ? "flex-row-reverse" : "flex-row"}`}
                 >
+                  {/* Avatar */}
                   <div
-                  className={`max-w-[80%] rounded-2xl px-4 py-2 ${
-                    msg.isFromMachine
-                      ? "bg-black text-white"
-                      : "bg-slate-100 text-slate-900"
+                    className={`flex size-8 shrink-0 items-center justify-center rounded-full ${
+                      isAgent ? "bg-black text-white" : "bg-slate-200 text-slate-600"
                     }`}
                   >
-                  {!msg.isFromMachine && (
+                    {isAgent ? <Headphones className="size-4" /> : <User className="size-4" />}
+                  </div>
+
+                  {/* Bubble */}
+                  <div
+                    className={`max-w-[75%] rounded-2xl px-4 py-2 ${
+                      isAgent
+                        ? "rounded-br-md bg-black text-white"
+                        : "rounded-bl-md border border-slate-100 bg-white text-slate-900 shadow-sm"
+                    }`}
+                  >
+                    {!isAgent && (
                       <p className="mb-1 text-xs font-medium text-slate-500">
                         {msg.authorName}
                       </p>
@@ -407,9 +421,7 @@ export function ChatWidget({ ticketId }: ChatWidgetProps) {
                           <div
                             key={att.storageId}
                             className={`flex items-center gap-2 rounded-lg p-2 text-xs ${
-                            msg.isFromMachine
-                              ? "bg-white/10"
-                              : "bg-slate-200"
+                              isAgent ? "bg-white/10" : "bg-slate-100"
                             }`}
                           >
                             {getFileIcon(att.name)}
@@ -425,14 +437,15 @@ export function ChatWidget({ ticketId }: ChatWidgetProps) {
                     )}
                     <p
                       className={`mt-1 text-right text-xs ${
-                      msg.isFromMachine ? "text-white/60" : "text-slate-400"
+                        isAgent ? "text-white/60" : "text-slate-400"
                       }`}
                     >
                       {formatTime(msg.createdAt)}
                     </p>
                   </div>
                 </div>
-            ))}
+              )
+            })}
             <div ref={messagesEndRef} />
           </div>
         )}