feat: refine styles

package.json

@@ -29,6 +29,7 @@
     "openai": "^4.56.0",
     "pyodide": "0.26.2",
     "rehype-stringify": "^10.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
     "rollup-plugin-flatten-dir": "^1.0.1",

src/lib/components/Chat.svelte

@@ -32,7 +32,7 @@
   }
 
   async function start() {
-    context = { ...context, query: content };
+    context = { ...context, query: content, result: undefined };
     running = true;
     try {
       for await (const i of chain.astream(context)) context = i;
@@ -64,7 +64,19 @@
           </section>
         {/if}
         {#if ctx.sources?.length}
-          <Highlight source={ctx.sources.join("\n")} lang="python" />
+          {#each ctx.sources as source, j}
+            {#if i === 0}
+              <!-- the last snapshot -->
+              <div class="transition-opacity" class:op-50={running && j + 1 !== ctx.sources.length && context.result}>
+                <div class="animate-(fade-in duration-300)">
+                  <Highlight {source} lang="python" />
+                </div>
+              </div>
+            {:else}
+              <!-- non-last snapshots -->
+              <Highlight {source} lang="python" />
+            {/if}
+          {/each}
         {/if}
         {#if ctx.results?.length}
           {@const entries = ctx.results.flatMap(Object.entries)}

src/lib/components/Markdown.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import type { BundledLanguage, BundledTheme } from "shiki";
 
+  import "./md.css";
+
   import rehypeShiki from "@shikijs/rehype";
   import { cached } from "$lib/utils/cache";
   import rehypeStringify from "rehype-stringify";
+  import remarkGfm from "remark-gfm";
   import remarkParse from "remark-parse";
   import remarkRehype from "remark-rehype";
   import { unified } from "unified";
@@ -13,7 +16,7 @@
   export let theme: BundledTheme = "vitesse-dark";
 
   export async function renderMarkdown(text: string, langs: BundledLanguage[] = []) {
-    const processor = cached(langs.join() + theme)(() => unified().use(remarkParse).use(remarkRehype).use(rehypeShiki, { theme, langs }).use(rehypeStringify))();
+    const processor = cached(langs.join() + theme)(() => unified().use(remarkParse).use(remarkGfm).use(remarkRehype).use(rehypeShiki, { theme, langs }).use(rehypeStringify))();
     const { value } = await processor.process(text);
     return value as string;
   }

src/lib/components/md.css

@@ -0,0 +1,53 @@
+.prose :where(h1, h2, h3, h4, h5, h6) {
+  @apply my-1em text-1.1em text-white font-bold;
+}
+
+.prose strong {
+  @apply text-white font-bold;
+}
+
+.prose pre {
+  @apply p-0.9em leading-relaxed;
+}
+
+.prose pre code {
+  @apply inline-block translate-none whitespace-pre bg-transparent;
+}
+
+.prose code {
+  @apply mx-0.15em inline-block whitespace-normal rounded bg-white/8 px-1 py-0.1 text-0.85em text-white font-normal -translate-y-0.1em after:content-none before:content-none;
+}
+
+.prose a,
+.prose a code {
+  @apply underline underline-(white op-30 offset-3.5) transition;
+}
+
+.prose a:hover,
+.prose a:hover code {
+  @apply text-white underline-op-60;
+}
+
+.prose table {
+  @apply w-fit b-1 b-white/6 rounded-md text-left;
+}
+
+.prose thead {
+  @apply bg-white/2 font-bold op-90;
+}
+
+.prose tr {
+  @apply b-b-1 b-white/6;
+}
+
+.prose tbody tr {
+  @apply transition-background-color last:b-b-none even:bg-white/2;
+}
+
+.prose tbody:hover tr {
+  @apply even:bg-white/1 hover:bg-white/4;
+}
+
+.prose blockquote {
+  @apply b-(l-0.2em white/10 solid) pl-1em not-italic;
+}