Add record chat sheet with OpenAI streaming
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claudio Ortolina
@@ -26,6 +26,18 @@
|
||||
data-slot="icon"
|
||||
/>
|
||||
</.button>
|
||||
<.button
|
||||
variant="soft"
|
||||
phx-click={MusicLibraryWeb.Components.RecordChat.open("record-chat-sheet")}
|
||||
>
|
||||
<span class="sr-only">{gettext("Chat about album")}</span>
|
||||
<.icon
|
||||
name="hero-chat-bubble-left-right"
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</.button>
|
||||
<.button
|
||||
:if={@record.selected_release_id}
|
||||
variant="soft"
|
||||
@@ -327,6 +339,13 @@
|
||||
musicbrainz_id={@record.musicbrainz_id}
|
||||
/>
|
||||
|
||||
<.live_component
|
||||
id="record-chat"
|
||||
sheet_id="record-chat-sheet"
|
||||
module={MusicLibraryWeb.Components.RecordChat}
|
||||
record={@record}
|
||||
/>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="record-modal"
|
||||
|
||||
@@ -12,131 +12,147 @@
|
||||
<h1 class="text-base font-medium leading-6 text-zinc-700">
|
||||
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
|
||||
</h1>
|
||||
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
|
||||
<:toggle class="h-5 block">
|
||||
<.button variant="ghost">
|
||||
<span class="sr-only">{gettext("Actions")}</span>
|
||||
<div class="min-w-12">
|
||||
<.button_group>
|
||||
<.button
|
||||
variant="soft"
|
||||
phx-click={MusicLibraryWeb.Components.RecordChat.open("record-chat-sheet")}
|
||||
>
|
||||
<span class="sr-only">{gettext("Chat about album")}</span>
|
||||
<.icon
|
||||
name="hero-ellipsis-vertical"
|
||||
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
name="hero-chat-bubble-left-right"
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</.button>
|
||||
</:toggle>
|
||||
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-edit"}
|
||||
patch={~p"/wishlist/#{@record}/show/edit"}
|
||||
>
|
||||
<.icon
|
||||
name="hero-pencil-square"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Edit")}
|
||||
</.dropdown_link>
|
||||
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
|
||||
<:toggle>
|
||||
<.button variant="soft">
|
||||
<span class="sr-only">{gettext("Actions")}</span>
|
||||
<.icon
|
||||
name="hero-ellipsis-vertical"
|
||||
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</.button>
|
||||
</:toggle>
|
||||
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-edit"}
|
||||
patch={~p"/wishlist/#{@record}/show/edit"}
|
||||
>
|
||||
<.icon
|
||||
name="hero-pencil-square"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Edit")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-refresh-cover"}
|
||||
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-photo"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Refresh cover")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-refresh-cover"}
|
||||
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-photo"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Refresh cover")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-refresh-mb-data"}
|
||||
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-arrow-path"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Refresh MB data")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-refresh-mb-data"}
|
||||
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-arrow-path"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Refresh MB data")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-populate-genres"}
|
||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-sparkles"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Populate genres")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-populate-genres"}
|
||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-sparkles"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Populate genres")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
:if={!@record.purchased_at}
|
||||
id={"actions-#{@record.id}-purchase"}
|
||||
phx-click={
|
||||
JS.dispatch("music_library:confetti")
|
||||
|> JS.push("add-to-collection", value: %{id: @record.id})
|
||||
}
|
||||
>
|
||||
<.icon
|
||||
name="hero-banknotes"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Purchased")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
:if={!@record.purchased_at}
|
||||
id={"actions-#{@record.id}-purchase"}
|
||||
phx-click={
|
||||
JS.dispatch("music_library:confetti")
|
||||
|> JS.push("add-to-collection", value: %{id: @record.id})
|
||||
}
|
||||
>
|
||||
<.icon
|
||||
name="hero-banknotes"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Purchased")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-extract-colors-fast"}
|
||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-paint-brush"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Extract colors (fast)")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-extract-colors-fast"}
|
||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-paint-brush"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Extract colors (fast)")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-extract-colors-slow"}
|
||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-paint-brush"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Extract colors (slow)")}
|
||||
</.dropdown_link>
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-extract-colors-slow"}
|
||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
||||
>
|
||||
<.icon
|
||||
name="hero-paint-brush"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Extract colors (slow)")}
|
||||
</.dropdown_link>
|
||||
|
||||
<.dropdown_separator />
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-delete"}
|
||||
phx-click={JS.push("delete", value: %{id: @record.id})}
|
||||
data-confirm={gettext("Are you sure?")}
|
||||
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||
>
|
||||
<.icon
|
||||
name="hero-trash"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Delete")}
|
||||
</.dropdown_link>
|
||||
</.focus_wrap>
|
||||
</.dropdown>
|
||||
<.dropdown_separator />
|
||||
<.dropdown_link
|
||||
id={"actions-#{@record.id}-delete"}
|
||||
phx-click={JS.push("delete", value: %{id: @record.id})}
|
||||
data-confirm={gettext("Are you sure?")}
|
||||
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||
>
|
||||
<.icon
|
||||
name="hero-trash"
|
||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
{gettext("Delete")}
|
||||
</.dropdown_link>
|
||||
</.focus_wrap>
|
||||
</.dropdown>
|
||||
</.button_group>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||
@@ -287,6 +303,13 @@
|
||||
|
||||
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
|
||||
|
||||
<.live_component
|
||||
id="record-chat"
|
||||
sheet_id="record-chat-sheet"
|
||||
module={MusicLibraryWeb.Components.RecordChat}
|
||||
record={@record}
|
||||
/>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action == :edit}
|
||||
id="record-modal"
|
||||
|
||||
Reference in New Issue
Block a user