From eea451417f4f3dc4c436660a81a15ff2eb19c1b5 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sun, 22 Feb 2026 10:31:10 +0000
Subject: [PATCH] Render chat as markdown, better layout

---
 lib/music_library_web/components/record_chat.ex | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/music_library_web/components/record_chat.ex b/lib/music_library_web/components/record_chat.ex
index 689eb908..7f8110ae 100644
--- a/lib/music_library_web/components/record_chat.ex
+++ b/lib/music_library_web/components/record_chat.ex
@@ -4,6 +4,7 @@ defmodule MusicLibraryWeb.Components.RecordChat do
   require Logger
 
   alias MusicLibrary.RecordChat
+  alias MusicLibraryWeb.Markdown
 
   def open(id), do: Fluxon.open_dialog(id)
 
@@ -52,7 +53,7 @@ defmodule MusicLibraryWeb.Components.RecordChat do
         placement="right"
         class="w-md sm:min-w-lg lg:min-w-2xl flex flex-col h-full"
       >
-        <div class="flex items-center justify-between pb-4 border-b border-zinc-200 dark:border-zinc-700">
+        <div class="flex items-center gap-2 pb-4 border-b border-zinc-200 dark:border-zinc-700">
           <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
             {gettext("Chat about %{title}", title: @record.title)}
           </h2>
@@ -94,7 +95,10 @@ defmodule MusicLibraryWeb.Components.RecordChat do
               message_classes(message.role)
             ]}
           >
-            <p class="whitespace-pre-wrap">{message.content}</p>
+            <p :if={message.role == "user"} class="whitespace-pre-wrap">{message.content}</p>
+            <div :if={message.role == "assistant"} class="prose prose-sm dark:prose-invert">
+              {raw(Markdown.to_html(message.content))}
+            </div>
           </div>
 
           <div