diff options
Diffstat (limited to 'packages/web/src/components')
| -rw-r--r-- | packages/web/src/components/Share.tsx | 391 |
1 files changed, 201 insertions, 190 deletions
diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx index 646ee7710..2b0e52c1a 100644 --- a/packages/web/src/components/Share.tsx +++ b/packages/web/src/components/Share.tsx @@ -1,7 +1,6 @@ import { For, Show, onMount, Suspense, onCleanup, createMemo, createSignal, SuspenseList, createEffect } from "solid-js" import { DateTime } from "luxon" import { createStore, reconcile, unwrap } from "solid-js/store" -import { mapValues } from "remeda" import { IconArrowDown } from "./icons" import { IconOpencode } from "./icons/custom" import styles from "./share.module.css" @@ -42,7 +41,6 @@ export default function Share(props: { id: string api: string info: Session.Info - messages: Record<string, MessageWithParts> }) { let lastScrollY = 0 let hasScrolledToAnchor = false @@ -50,7 +48,6 @@ export default function Share(props: { let scrollSentinel: HTMLElement | undefined let scrollObserver: IntersectionObserver | undefined - const id = props.id const params = new URLSearchParams(window.location.search) const debug = params.get("debug") === "true" @@ -61,17 +58,27 @@ export default function Share(props: { const [store, setStore] = createStore<{ info?: Session.Info messages: Record<string, MessageWithParts> - }>({ info: props.info, messages: {} }) + }>({ + info: { + id: props.id, + title: props.info.title, + version: props.info.version, + time: { + created: props.info.time.created, + updated: props.info.time.updated, + }, + }, messages: {} + }) const messages = createMemo(() => Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id))) const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>(["disconnected", "Disconnected"]) - // createEffect(() => { - // console.log(unwrap(store)) - // }) + createEffect(() => { + console.log(unwrap(store)) + }) onMount(() => { const apiUrl = props.api - if (!id) { + if (!props.id) { setConnectionStatus(["error", "id not found"]) return } @@ -96,7 +103,7 @@ export default function Share(props: { // Always use secure WebSocket protocol (wss) const wsBaseUrl = apiUrl.replace(/^https?:\/\//, "wss://") - const wsUrl = `${wsBaseUrl}/share_poll?id=${id}` + const wsUrl = `${wsBaseUrl}/share_poll?id=${props.id}` console.log("Connecting to WebSocket URL:", wsUrl) // Create WebSocket connection @@ -261,7 +268,9 @@ export default function Share(props: { }, } - result.created = props.info.time.created + if (!store.info) return result + + result.created = store.info.time.created const msgs = messages() for (let i = 0; i < msgs.length; i++) { @@ -290,197 +299,199 @@ export default function Share(props: { }) return ( - <main classList={{ [styles.root]: true, "not-content": true }}> - <div data-component="header"> - <h1 data-component="header-title">{store.info?.title}</h1> - <div data-component="header-details"> - <ul data-component="header-stats"> - <li title="opencode version" data-slot="item"> - <div data-slot="icon" title="opencode"> - <IconOpencode width={16} height={16} /> - </div> - <Show when={store.info?.version} fallback="v0.0.1"> - <span>v{store.info?.version}</span> - </Show> - </li> - {Object.values(data().models).length > 0 ? ( - <For each={Object.values(data().models)}> - {([provider, model]) => ( - <li data-slot="item"> - <div data-slot="icon" title={provider}> - <ProviderIcon model={model} /> - </div> - <span data-slot="model">{model}</span> - </li> - )} - </For> - ) : ( - <li> - <span data-element-label>Models</span> - <span data-placeholder>—</span> + <Show when={store.info}> + <main classList={{ [styles.root]: true, "not-content": true }}> + <div data-component="header"> + <h1 data-component="header-title">{store.info?.title}</h1> + <div data-component="header-details"> + <ul data-component="header-stats"> + <li title="opencode version" data-slot="item"> + <div data-slot="icon" title="opencode"> + <IconOpencode width={16} height={16} /> + </div> + <Show when={store.info?.version} fallback="v0.0.1"> + <span>v{store.info?.version}</span> + </Show> </li> - )} - </ul> - <div - data-component="header-time" - title={DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)} - > - {DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_MED)} + {Object.values(data().models).length > 0 ? ( + <For each={Object.values(data().models)}> + {([provider, model]) => ( + <li data-slot="item"> + <div data-slot="icon" title={provider}> + <ProviderIcon model={model} /> + </div> + <span data-slot="model">{model}</span> + </li> + )} + </For> + ) : ( + <li> + <span data-element-label>Models</span> + <span data-placeholder>—</span> + </li> + )} + </ul> + <div + data-component="header-time" + title={DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)} + > + {DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_MED)} + </div> </div> </div> - </div> - - <div> - <Show when={data().messages.length > 0} fallback={<p>Waiting for messages...</p>}> - <div class={styles.parts}> - <SuspenseList revealOrder="forwards"> - <For each={data().messages}> - {(msg, msgIndex) => { - const filteredParts = createMemo(() => - msg.parts.filter((x, index) => { - if (x.type === "step-start" && index > 0) return false - if (x.type === "snapshot") return false - if (x.type === "patch") return false - if (x.type === "step-finish") return false - if (x.type === "text" && x.synthetic === true) 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"> - <div data-section="decoration"> - <span data-status={connectionStatus()[0]}></span> + + <div> + <Show when={data().messages.length > 0} fallback={<p>Waiting for messages...</p>}> + <div class={styles.parts}> + <SuspenseList revealOrder="forwards"> + <For each={data().messages}> + {(msg, msgIndex) => { + const filteredParts = createMemo(() => + msg.parts.filter((x, index) => { + if (x.type === "step-start" && index > 0) return false + if (x.type === "snapshot") return false + if (x.type === "patch") return false + if (x.type === "step-finish") return false + if (x.type === "text" && x.synthetic === true) 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"> + <div data-section="decoration"> + <span data-status={connectionStatus()[0]}></span> + </div> + <div data-section="content"> + <p data-section="copy">{getStatusText(connectionStatus())}</p> + <ul data-section="stats"> + <li> + <span data-element-label>Cost</span> + {data().cost !== undefined ? ( + <span>${data().cost.toFixed(2)}</span> + ) : ( + <span data-placeholder>—</span> + )} + </li> + <li> + <span data-element-label>Input Tokens</span> + {data().tokens.input ? <span>{data().tokens.input}</span> : <span data-placeholder>—</span>} + </li> + <li> + <span data-element-label>Output Tokens</span> + {data().tokens.output ? <span>{data().tokens.output}</span> : <span data-placeholder>—</span>} + </li> + <li> + <span data-element-label>Reasoning Tokens</span> + {data().tokens.reasoning ? ( + <span>{data().tokens.reasoning}</span> + ) : ( + <span data-placeholder>—</span> + )} + </li> + </ul> + </div> </div> - <div data-section="content"> - <p data-section="copy">{getStatusText(connectionStatus())}</p> - <ul data-section="stats"> - <li> - <span data-element-label>Cost</span> - {data().cost !== undefined ? ( - <span>${data().cost.toFixed(2)}</span> - ) : ( - <span data-placeholder>—</span> - )} - </li> - <li> - <span data-element-label>Input Tokens</span> - {data().tokens.input ? <span>{data().tokens.input}</span> : <span data-placeholder>—</span>} - </li> - <li> - <span data-element-label>Output Tokens</span> - {data().tokens.output ? <span>{data().tokens.output}</span> : <span data-placeholder>—</span>} - </li> - <li> - <span data-element-label>Reasoning Tokens</span> - {data().tokens.reasoning ? ( - <span>{data().tokens.reasoning}</span> - ) : ( - <span data-placeholder>—</span> + </div> + </Show> + </div> + + <Show when={debug}> + <div style={{ margin: "2rem 0" }}> + <div + style={{ + border: "1px solid #ccc", + padding: "1rem", + "overflow-y": "auto", + }} + > + <Show when={data().messages.length > 0} fallback={<p>Waiting for messages...</p>}> + <ul style={{ "list-style-type": "none", padding: 0 }}> + <For each={data().messages}> + {(msg) => ( + <li + style={{ + padding: "0.75rem", + margin: "0.75rem 0", + "box-shadow": "0 1px 3px rgba(0,0,0,0.1)", + }} + > + <div> + <strong>Key:</strong> {msg.id} + </div> + <pre>{JSON.stringify(msg, null, 2)}</pre> + </li> )} - </li> + </For> </ul> - </div> + </Show> </div> </div> </Show> - </div> - - <Show when={debug}> - <div style={{ margin: "2rem 0" }}> - <div - style={{ - border: "1px solid #ccc", - padding: "1rem", - "overflow-y": "auto", + + <Show when={showScrollButton()}> + <button + type="button" + class={styles["scroll-button"]} + onClick={() => document.body.scrollIntoView({ behavior: "smooth", block: "end" })} + onMouseEnter={() => { + setIsButtonHovered(true) + if (scrollTimeout) { + clearTimeout(scrollTimeout) + } }} + onMouseLeave={() => { + setIsButtonHovered(false) + if (showScrollButton()) { + scrollTimeout = window.setTimeout(() => { + if (!isButtonHovered()) { + setShowScrollButton(false) + } + }, 3000) + } + }} + title="Scroll to bottom" + aria-label="Scroll to bottom" > - <Show when={data().messages.length > 0} fallback={<p>Waiting for messages...</p>}> - <ul style={{ "list-style-type": "none", padding: 0 }}> - <For each={data().messages}> - {(msg) => ( - <li - style={{ - padding: "0.75rem", - margin: "0.75rem 0", - "box-shadow": "0 1px 3px rgba(0,0,0,0.1)", - }} - > - <div> - <strong>Key:</strong> {msg.id} - </div> - <pre>{JSON.stringify(msg, null, 2)}</pre> - </li> - )} - </For> - </ul> - </Show> - </div> - </div> - </Show> - - <Show when={showScrollButton()}> - <button - type="button" - class={styles["scroll-button"]} - onClick={() => document.body.scrollIntoView({ behavior: "smooth", block: "end" })} - onMouseEnter={() => { - setIsButtonHovered(true) - if (scrollTimeout) { - clearTimeout(scrollTimeout) - } - }} - onMouseLeave={() => { - setIsButtonHovered(false) - if (showScrollButton()) { - scrollTimeout = window.setTimeout(() => { - if (!isButtonHovered()) { - setShowScrollButton(false) - } - }, 3000) - } - }} - title="Scroll to bottom" - aria-label="Scroll to bottom" - > - <IconArrowDown width={20} height={20} /> - </button> - </Show> - </main> + <IconArrowDown width={20} height={20} /> + </button> + </Show> + </main> + </Show> ) } |