docs: share page last part fix

packages/web/src/components/CodeBlock.tsx

@@ -1,32 +0,0 @@
-import { type JSX, splitProps, createResource } from "solid-js"
-import { codeToHtml } from "shiki"
-import styles from "./codeblock.module.css"
-import { transformerNotationDiff } from "@shikijs/transformers"
-
-interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  code: string
-  lang?: string
-}
-function CodeBlock(props: CodeBlockProps) {
-  const [local, rest] = splitProps(props, ["code", "lang"])
-
-  const [html] = createResource(
-    () => [local.code, local.lang],
-    async ([code, lang]) => {
-      // TODO: For testing delays
-      // await new Promise((resolve) => setTimeout(resolve, 3000))
-      return (await codeToHtml(code || "", {
-        lang: lang || "text",
-        themes: {
-          light: "github-light",
-          dark: "github-dark",
-        },
-        transformers: [transformerNotationDiff()],
-      })) as string
-    },
-  )
-
-  return <div innerHTML={html()} class={styles.codeblock} {...rest}></div>
-}
-
-export default CodeBlock

packages/web/src/components/Share.tsx

@@ -1,13 +1,4 @@
-import {
-  For,
-  Show,
-  onMount,
-  Suspense,
-  onCleanup,
-  createMemo,
-  createSignal,
-  SuspenseList,
-} from "solid-js"
+import { For, Show, onMount, Suspense, onCleanup, createMemo, createSignal, SuspenseList } from "solid-js"
 import { DateTime } from "luxon"
 import { createStore, reconcile } from "solid-js/store"
 import { IconArrowDown } from "./icons"
@@ -277,7 +268,6 @@ export default function Share(props: {
         }
       }
     }
-    console.log(result.messages)
     return result
   })
 
@@ -327,21 +317,25 @@ export default function Share(props: {
           <div class={styles.parts}>
             <SuspenseList revealOrder="forwards">
               <For each={data().messages}>
-                {(msg, msgIndex) => (
-                  <Suspense>
-                    <For
-                      each={msg.parts.filter((x, index) => {
+                {(msg, msgIndex) => {
+                  const filteredParts = createMemo(() =>
+                    msg.parts.filter((x, index) => {
                       if (x.type === "step-start" && index > 0) return false
                       if (x.type === "tool" && x.tool === "todoread") return false
                       if (x.type === "text" && !x.text) return false
                       if (x.type === "tool" && (x.state.status === "pending" || x.state.status === "running"))
                         return false
                       return true
-                      })}
-                    >
+                    })
+                  )
+
+                  return (
+                    <Suspense>
+                      <For each={filteredParts()}>
                         {(part, partIndex) => {
                           const last = createMemo(
-                          () => data().messages.length === msgIndex() + 1 && msg.parts.length === partIndex() + 1,
+                            () =>
+                              data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1,
                           )
 
                           onMount(() => {
@@ -350,7 +344,7 @@ export default function Share(props: {
                             if (
                               hash !== "" &&
                               !hasScrolledToAnchor &&
-                            msg.parts.length === partIndex() + 1 &&
+                              filteredParts().length === partIndex() + 1 &&
                               data().messages.length === msgIndex() + 1
                             ) {
                               hasScrolledToAnchor = true
@@ -362,7 +356,8 @@ export default function Share(props: {
                         }}
                       </For>
                     </Suspense>
-                )}
+                  )
+                }}
               </For>
             </SuspenseList>
             <div data-section="part" data-part-type="summary">

packages/web/src/components/codeblock.module.css

@@ -1,10 +0,0 @@
-.codeblock {
-  pre {
-    --shiki-dark-bg: var(--sl-color-bg-surface) !important;
-    background-color: var(--sl-color-bg-surface) !important;
-
-    span {
-      white-space: break-spaces;
-    }
-  }
-}