More styles; submit message on enter, ctrl+enter

app/assets/images/arrow-up.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22.41 10.2-9.704-9.8a.99.99 0 0 0 -.706-.3.992.992 0 0 0 -.7.289l-9.727 9.631a2.6 2.6 0 0 0 .1 3.657 2.59 2.59 0 0 0 3.657.1l3.743-3.732a.25.25 0 0 1 .426.178v11.666c-.016 1.559 1.665 2.011 2.501 2.011a2.276 2.276 0 0 0 2.5-2.034v-11.625a.25.25 0 0 1 .431-.173l3.722 3.881a2.658 2.658 0 0 0 3.757-3.749z"/></svg>

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);
   }
 }

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 "); }

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 {

app/views/conversations/show.html.erb

@@ -1,6 +1,9 @@
 <%= turbo_frame_tag "conversation", target: "_top" do %>
   <%= turbo_stream_from Current.user, :conversation %>
   <div class="conversation">
+    <div class="conversation__header">
+      <span class="txt-medium font-weight-black">Fizzy /Ask</span>
+    </div>
     <%= 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 } %>

app/views/conversations/show/_composer.html.erb

@@ -10,11 +10,14 @@
 
   <div class="conversation__input">
     <%= 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" } %>
   </div>
 
   <div class="conversation__submit">
-    <%= 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" %>
+      <span class="for-screen-reader">Send message</span>
+    <% end %>
   </div>
 <% end %>