diff --git a/bun.lock b/bun.lock index 338fb49cb..0d9a9116d 100644 --- a/bun.lock +++ b/bun.lock @@ -179,6 +179,7 @@ "aws4fetch": "^1.0.20", "hono": "catalog:", "hono-openapi": "catalog:", + "js-base64": "3.7.7", "luxon": "catalog:", "nitro": "3.0.1-alpha.1", "solid-js": "catalog:", diff --git a/packages/enterprise/package.json b/packages/enterprise/package.json index 5a01dfb0b..35844bdc2 100644 --- a/packages/enterprise/package.json +++ b/packages/enterprise/package.json @@ -20,6 +20,7 @@ "@solidjs/meta": "catalog:", "hono": "catalog:", "hono-openapi": "catalog:", + "js-base64": "3.7.7", "luxon": "catalog:", "nitro": "3.0.1-alpha.1", "solid-js": "catalog:", diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx index 6c63cf7f3..fee66b478 100644 --- a/packages/enterprise/src/routes/share/[shareID].tsx +++ b/packages/enterprise/src/routes/share/[shareID].tsx @@ -24,6 +24,7 @@ import { Diff as SSRDiff } from "@opencode-ai/ui/diff-ssr" import { clientOnly } from "@solidjs/start" import { type IconName } from "@opencode-ai/ui/icons/provider" import { Meta } from "@solidjs/meta" +import { Base64 } from "js-base64" const ClientOnlyDiff = clientOnly(() => import("@opencode-ai/ui/diff").then((m) => ({ default: m.Diff }))) @@ -42,6 +43,7 @@ const getData = query(async (shareID) => { const data = await Share.data(shareID) const result: { sessionID: string + shareID: string session: Session[] session_diff: { [sessionID: string]: FileDiff[] @@ -66,6 +68,7 @@ const getData = query(async (shareID) => { } } = { sessionID: share.sessionID, + shareID, session: [], session_diff: { [share.sessionID]: [], @@ -160,239 +163,271 @@ export default function () { const match = createMemo(() => Binary.search(data().session, data().sessionID, (s) => s.id)) if (!match().found) throw new Error(`Session ${data().sessionID} not found`) const info = createMemo(() => data().session[match().index]) + const ogImage = createMemo(() => { + const models = new Set() + const messages = data().message[data().sessionID] ?? [] + for (const msg of messages) { + if (msg.role === "assistant" && msg.modelID) { + models.add(msg.modelID) + } + } + const modelIDs = Array.from(models) + const encodedTitle = encodeURIComponent(Base64.encode(encodeURIComponent(info().title.substring(0, 700)))) + let modelParam: string + if (modelIDs.length === 1) { + modelParam = modelIDs[0] + } else if (modelIDs.length === 2) { + modelParam = encodeURIComponent(`${modelIDs[0]} & ${modelIDs[1]}`) + } else if (modelIDs.length > 2) { + modelParam = encodeURIComponent(`${modelIDs[0]} & ${modelIDs.length - 1} others`) + } else { + modelParam = "unknown" + } + const version = `v${info().version}` + return `https://social-cards.sst.dev/opencode-share/${encodedTitle}.png?model=${modelParam}&version=${version}&id=${data().shareID}` + }) return ( - - - {iife(() => { - const [store, setStore] = createStore({ - messageId: undefined as string | undefined, - }) - const messages = createMemo(() => - data().sessionID - ? (data().message[data().sessionID]?.filter((m) => m.role === "user") ?? []).sort( - (a, b) => b.time.created - a.time.created, - ) - : [], - ) - const firstUserMessage = createMemo(() => messages().at(0)) - const activeMessage = createMemo( - () => messages().find((m) => m.id === store.messageId) ?? firstUserMessage(), - ) - function setActiveMessage(message: UserMessage | undefined) { - if (message) { - setStore("messageId", message.id) - } else { - setStore("messageId", undefined) + <> + + + + + + {iife(() => { + const [store, setStore] = createStore({ + messageId: undefined as string | undefined, + }) + const messages = createMemo(() => + data().sessionID + ? (data().message[data().sessionID]?.filter((m) => m.role === "user") ?? []).sort( + (a, b) => b.time.created - a.time.created, + ) + : [], + ) + const firstUserMessage = createMemo(() => messages().at(0)) + const activeMessage = createMemo( + () => messages().find((m) => m.id === store.messageId) ?? firstUserMessage(), + ) + function setActiveMessage(message: UserMessage | undefined) { + if (message) { + setStore("messageId", message.id) + } else { + setStore("messageId", undefined) + } } - } - const provider = createMemo(() => activeMessage()?.model?.providerID) - const modelID = createMemo(() => activeMessage()?.model?.modelID) - const model = createMemo(() => data().model[data().sessionID]?.find((m) => m.id === modelID())) - const diffs = createMemo(() => { - const diffs = data().session_diff[data().sessionID] ?? [] - const preloaded = data().session_diff_preload[data().sessionID] ?? [] - return diffs.map((diff) => ({ - ...diff, - preloaded: preloaded.find((d) => d.newFile.name === diff.file), - })) - }) - const splitDiffs = createMemo(() => { - const diffs = data().session_diff[data().sessionID] ?? [] - const preloaded = data().session_diff_preload_split[data().sessionID] ?? [] - return diffs.map((diff) => ({ - ...diff, - preloaded: preloaded.find((d) => d.newFile.name === diff.file), - })) - }) + const provider = createMemo(() => activeMessage()?.model?.providerID) + const modelID = createMemo(() => activeMessage()?.model?.modelID) + const model = createMemo(() => data().model[data().sessionID]?.find((m) => m.id === modelID())) + const diffs = createMemo(() => { + const diffs = data().session_diff[data().sessionID] ?? [] + const preloaded = data().session_diff_preload[data().sessionID] ?? [] + return diffs.map((diff) => ({ + ...diff, + preloaded: preloaded.find((d) => d.newFile.name === diff.file), + })) + }) + const splitDiffs = createMemo(() => { + const diffs = data().session_diff[data().sessionID] ?? [] + const preloaded = data().session_diff_preload_split[data().sessionID] ?? [] + return diffs.map((diff) => ({ + ...diff, + preloaded: preloaded.find((d) => d.newFile.name === diff.file), + })) + }) - const title = () => ( -
-
-
- -
v{info().version}
+ const title = () => ( +
+
+
+ +
v{info().version}
+
+
+ +
{model()?.name ?? modelID()}
+
+
+ {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")} +
-
- -
{model()?.name ?? modelID()}
+
{info().title}
+
+ ) + + const turns = () => ( +
+
{title()}
+
+ + {(message) => ( + + )} +
-
- {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")} +
+
-
{info().title}
-
- ) + ) - const turns = () => ( -
-
{title()}
-
- - {(message) => ( - diffs().length === 0) + + return ( +
+
+
+ + + +
+
+ - )} - -
-
- -
-
- ) - - const wide = createMemo(() => diffs().length === 0) - - return ( -
-
-
- - - -
-
- - -
-
-
-
+ +
+ +
1, - "px-6": !wide() && messages().length === 1, + "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true, + "mx-auto max-w-146": !wide(), }} > - {title()} -
-
- - 1 ? "pr-6 pl-18" : "px-6"), +
1, + "px-6": !wide() && messages().length === 1, }} > -
- -
- -
-
- 0}> - -
- -
+
+ + 1 + ? "pr-6 pl-18" + : "px-6"), + }} + > +
+ +
+
- - -
- - 0}> - - - - Session - - - {diffs().length} Files Changed - - - - {turns()} - - - - - -
- {turns()}
- - + 0}> + +
+ +
+ + +
+ + 0}> + + + + Session + + + {diffs().length} Files Changed + + + + {turns()} + + + + + +
+ {turns()} +
+ + +
-
- ) - })} - - + ) + })} + + + ) }}