Merge branch 'main' into markdown-stream-component

Author: cpsievert

js/chat/chat.scss

@@ -12,74 +12,74 @@ shiny-chat-container {
   p:last-child {
     margin-bottom: 0;
   }
+}
 
-  shiny-chat-messages {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-
-    shiny-chat-message {
-      display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
-      gap: 1rem;
-      > * {
-        height: fit-content;
-      }
-      .message-icon {
-        border-radius: 50%;
-        border: var(--shiny-chat-border);
-        > * {
-          margin: 0.5rem;
-          height: 20px;
-          width: 20px;
-        }
-      }
-      /* Vertically center the 2nd column (message content) */
-      shiny-markdown {
-        align-self: center;
-      }
-    }
+shiny-chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
 
-    /* Align the user message to the right */
-    shiny-user-message {
-      align-self: flex-end;
-      padding: 0.75rem 1rem;
-      border-radius: 10px;
-      background-color: var(--shiny-chat-user-message-bg);
-      max-width: 100%;
+shiny-chat-message {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 1rem;
+  > * {
+    height: fit-content;
+  }
+  .message-icon {
+    border-radius: 50%;
+    border: var(--shiny-chat-border);
+    > * {
+      margin: 0.5rem;
+      height: 20px;
+      width: 20px;
     }
   }
+  /* Vertically center the 2nd column (message content) */
+  shiny-markdown-stream {
+    align-self: center;
+  }
+}
 
-  shiny-chat-input {
-    margin-top: auto;
-    position: sticky;
-    background-color: var(--bs-body-bg, white);
-    bottom: 0;
-    textarea {
-      --bs-border-radius: 26px;
-      resize: none;
-      padding-right: 36px !important;
-      max-height: 175px;
-      &::placeholder {
-        color: var(--bs-gray-600, #707782) !important;
-      }
+/* Align the user message to the right */
+shiny-user-message {
+  align-self: flex-end;
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+  background-color: var(--shiny-chat-user-message-bg);
+  max-width: 100%;
+}
+
+shiny-chat-input {
+  margin-top: auto;
+  position: sticky;
+  background-color: var(--bs-body-bg, white);
+  bottom: 0;
+  textarea {
+    --bs-border-radius: 26px;
+    resize: none;
+    padding-right: 36px !important;
+    max-height: 175px;
+    &::placeholder {
+      color: var(--bs-gray-600, #707782) !important;
     }
-    button {
-      position: absolute;
-      bottom: 7px;
-      right: 8px;
-      background-color: transparent;
-      color: var(--bs-primary, #007bc2);
-      transition: color 0.25s ease-in-out;
-      border: none;
-      padding: 0;
-      cursor: pointer;
-      line-height: 16px;
-      border-radius: 50%;
-      &:disabled {
-        cursor: not-allowed;
-        color: var(--bs-gray-500, #8d959e);
-      }
+  }
+  button {
+    position: absolute;
+    bottom: 7px;
+    right: 8px;
+    background-color: transparent;
+    color: var(--bs-primary, #007bc2);
+    transition: color 0.25s ease-in-out;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    line-height: 16px;
+    border-radius: 50%;
+    &:disabled {
+      cursor: not-allowed;
+      color: var(--bs-gray-500, #8d959e);
     }
   }
 }