diff --git a/app/assets/images/arrow-up.svg b/app/assets/images/arrow-up.svg new file mode 100644 index 000000000..69fb20ab4 --- /dev/null +++ b/app/assets/images/arrow-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/conversation.css b/app/assets/stylesheets/conversation.css index 1683a5923..d253f16a9 100644 --- a/app/assets/stylesheets/conversation.css +++ b/app/assets/stylesheets/conversation.css @@ -1,16 +1,15 @@ @layer components { .conversation { + font-family: var(--font-sans); padding-block-end: 6em; } .conversation__composer { - background-color: var(--color-white); - border-block-start: 1px solid var(--color-ink-lighter); - border-radius: 0 0 0.5em 0.5em; + backdrop-filter: blur(24px); display: flex; gap: var(--inline-space); inset: auto 0 0 0; - padding: var(--block-space-half) var(--block-space); + padding: var(--block-space); position: absolute; .conversation__submit { @@ -19,6 +18,14 @@ } } + .conversation__header { + backdrop-filter: blur(24px); + inset: 0 0 auto 0; + padding: var(--block-space); + position: absolute; + text-align: center; + } + .conversation__input { align-items: center; flex-grow: 1; @@ -32,11 +39,9 @@ display: flex; .action-text-content { - background-color: var(--color-ink-lightest); + border-radius: 0.5rem; - font-size: var(--text-x-small); inline-size: fit-content; - padding: var(--block-space); } p { @@ -71,8 +76,9 @@ justify-content: flex-end; .action-text-content { - background-color: var(--color-selected); + background-color: var(--color-ink-lightest); margin-inline-start: 15%; + padding: var(--block-space-half) var(--inline-space-double); text-align: end; } } @@ -93,8 +99,9 @@ display: flex; flex-direction: column; gap: var(--block-space); - max-block-size: calc(100dvh - 6em - var(--block-space) - 2 * var(--footer-height)); + margin-inline: calc(var(--block-space-half) * -0.5); + max-block-size: calc(100dvh - 6em - var(--block-space-double) - 2 * var(--footer-height)); overflow-y: auto; - padding: var(--block-space-half) var(--block-space-half); + padding: var(--block-space-half) var(--block-space); } } diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index d3034d5c7..0839dc103 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -20,6 +20,7 @@ .icon--add { --svg: url("add.svg "); } .icon--arrow-left { --svg: url("arrow-left.svg "); } .icon--arrow-right { --svg: url("arrow-right.svg "); } + .icon--arrow-up { --svg: url("arrow-up.svg "); } .icon--art { --svg: url("art.svg "); } .icon--assigned { --svg: url("assigned.svg "); } .icon--attachment { --svg: url("attachment.svg "); } diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index b97491b53..683642ba5 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -193,10 +193,11 @@ } .terminal__modal { + --panel-border-radius: 1.5em; --panel-padding: var(--block-space-half); max-block-size: calc(100dvh - var(--block-space-double) - 2 * var(--footer-height)); - overflow: unset; + overflow: clip; } .terminal__item { diff --git a/app/views/conversations/show.html.erb b/app/views/conversations/show.html.erb index 842e779e5..bfb8134fb 100644 --- a/app/views/conversations/show.html.erb +++ b/app/views/conversations/show.html.erb @@ -1,6 +1,9 @@ <%= turbo_frame_tag "conversation", target: "_top" do %> <%= turbo_stream_from Current.user, :conversation %>
+
+ Fizzy /Ask +
<%= turbo_frame_tag dom_id(@conversation, :messages_container), src: conversation_messages_path, target: "_top" %> <%= render partial: "conversations/show/thinking_indicator", locals: { conversation: @conversation } %> <%= render partial: "conversations/show/composer", locals: { conversation: @conversation } %> diff --git a/app/views/conversations/show/_composer.html.erb b/app/views/conversations/show/_composer.html.erb index 76ce02242..517ea2455 100644 --- a/app/views/conversations/show/_composer.html.erb +++ b/app/views/conversations/show/_composer.html.erb @@ -10,11 +10,14 @@
<%= form.text_area :content, autofocus: "on", placeholder: "Ask something…", rows: 1, - class: "input input--textarea", data: { conversation__composer_target: "textInput" } %> + class: "input input--textarea", data: { action: "keydown.enter->conversation--composer#submit keydown.ctrl+enter->conversation--composer#submit", conversation__composer_target: "textInput" } %>
- <%= form.submit "Send", class: "btn", - data: { conversation__composer_target: "submitButton", action: "click->conversation--composer#submit"} %> + <%= form.button type: "submit", class: "btn btn--link txt-small", + data: { conversation__composer_target: "submitButton", action: "click->conversation--composer#submit"} do %> + <%= icon_tag "arrow-up" %> + Send message + <% end %>
<% end %>