wip: Improve results formatting in Q&A palette

vriteio · Feb 4, 2024 · d693636 · d693636
1 parent 614842f
commit d693636
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/apps/web/src/context/command-palette/index.tsx b/apps/web/src/context/command-palette/index.tsx
@@ -140,10 +140,22 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       },
       onmessage(event) {
         const partOfContent = decodeURIComponent(event.data);
+        const scrollableContainer = scrollableContainerRef();
 
         content += partOfContent;
         setAnswer(marked.parse(content, { gfm: true, headerIds: false, mangle: false }));
-        scrollableContainerRef()?.scrollTo(0, scrollableContainerRef()?.scrollHeight || 0);
+
+        if (!scrollableContainer) return;
+
+        const delta =
+          scrollableContainer.scrollHeight -
+          scrollableContainer.scrollTop -
+          scrollableContainer.clientHeight;
+
+        // If the user has not scrolled up
+        if (delta < 50) {
+          scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
+        }
       },
       onclose() {
         setLoading(false);
@@ -541,7 +553,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                     )}
                     color="base"
                   >
-                    <div class="flex flex-col w-full prose prose-editor" innerHTML={answer()} />
+                    <div class="flex flex-col w-full prose prose-output" innerHTML={answer()} />
                     <Show when={!loading()}>
                       <IconButton
                         color="contrast"

diff --git a/apps/web/src/styles/styles.scss b/apps/web/src/styles/styles.scss
@@ -45,6 +45,7 @@ kbd {
   cursor: ew-resize;
   cursor: col-resize;
 }
+.prose-output,
 .prose-editor {
   p,
   ul,
@@ -366,6 +367,27 @@ kbd {
     }
   }
 }
+.prose-output {
+  :where(p, ul, ol, pre):not(:where(.not-prose, .not-prose *)) {
+    margin: 0.375rem 0;
+  }
+  pre {
+    @apply bg-gray-100 dark:bg-gray-800 leading-5 px-3 py-2 whitespace-pre-wrap;
+    &::-webkit-scrollbar {
+      @apply bg-gray-100 dark:bg-gray-800 border rounded-bl-lg rounded-br-lg w-2 h-4;
+    }
+    &::-webkit-scrollbar-thumb {
+      @apply bg-gray-50 dark:bg-gray-900 border-4 border-4 border-solid border-gray-100 dark:border-gray-800 rounded-lg;
+    }
+    &::-webkit-scrollbar-track {
+      @apply mx-2;
+    }
+    code {
+      padding: 0;
+      @apply bg-transparent dark:bg-transparent text-gray-500 dark:text-gray-400;
+    }
+  }
+}
 @supports (not selector(::-webkit-scrollbar)) {
   .scrollbar-sm {
     scrollbar-color: #e2e8f0 #f8fafc;