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,42 +317,47 @@ 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) => {
-                        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
-                      })}
-                    >
-                      {(part, partIndex) => {
-                        const last = createMemo(
-                          () => data().messages.length === msgIndex() + 1 && msg.parts.length === partIndex() + 1,
-                        )
-
-                        onMount(() => {
-                          const hash = window.location.hash.slice(1)
-                          // Wait till all parts are loaded
-                          if (
-                            hash !== "" &&
-                            !hasScrolledToAnchor &&
-                            msg.parts.length === partIndex() + 1 &&
-                            data().messages.length === msgIndex() + 1
-                          ) {
-                            hasScrolledToAnchor = true
-                            scrollToAnchor(hash)
-                          }
-                        })
-
-                        return <Part last={last()} part={part} index={partIndex()} message={msg} />
-                      }}
-                    </For>
-                  </Suspense>
-                )}
+                {(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 && filteredParts().length === partIndex() + 1,
+                          )
+
+                          onMount(() => {
+                            const hash = window.location.hash.slice(1)
+                            // Wait till all parts are loaded
+                            if (
+                              hash !== "" &&
+                              !hasScrolledToAnchor &&
+                              filteredParts().length === partIndex() + 1 &&
+                              data().messages.length === msgIndex() + 1
+                            ) {
+                              hasScrolledToAnchor = true
+                              scrollToAnchor(hash)
+                            }
+                          })
+
+                          return <Part last={last()} part={part} index={partIndex()} message={msg} />
+                        }}
+                      </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;
-    }
-  }
-}