693 lines
31 KiB
TypeScript
693 lines
31 KiB
TypeScript
import { createSignal, onCleanup, onMount, Show, For } from "solid-js"
|
|
import { useParams } from "@solidjs/router"
|
|
import { type UIMessage } from "ai"
|
|
|
|
type Message = {
|
|
key: string
|
|
content: string
|
|
}
|
|
|
|
type SessionInfo = {
|
|
tokens?: {
|
|
input?: number
|
|
output?: number
|
|
reasoning?: number
|
|
}
|
|
}
|
|
|
|
export default function App() {
|
|
const params = useParams<{ id: string }>()
|
|
const [connectionStatus, setConnectionStatus] = createSignal("Disconnected")
|
|
const [sessionInfo, setSessionInfo] = createSignal<SessionInfo | null>(null)
|
|
const [systemMessage, setSystemMessage] = createSignal<Message | null>(null)
|
|
const [messages, setMessages] = createSignal<Message[]>([])
|
|
const [expandedSystemMessage, setExpandedSystemMessage] = createSignal(false)
|
|
|
|
onMount(() => {
|
|
// Get the API URL from environment
|
|
const apiUrl = import.meta.env.VITE_API_URL
|
|
const shareId = params.id
|
|
|
|
console.log("Mounting Share component with ID:", shareId)
|
|
console.log("API URL:", apiUrl)
|
|
|
|
if (!shareId) {
|
|
console.error("Share ID not found in environment variables")
|
|
setConnectionStatus("Error: Share ID not found")
|
|
return
|
|
}
|
|
|
|
if (!apiUrl) {
|
|
console.error("API URL not found in environment variables")
|
|
setConnectionStatus("Error: API URL not found")
|
|
return
|
|
}
|
|
|
|
let reconnectTimer: number | undefined
|
|
let socket: WebSocket | null = null
|
|
|
|
// Function to create and set up WebSocket with auto-reconnect
|
|
const setupWebSocket = () => {
|
|
// Close any existing connection
|
|
if (socket) {
|
|
socket.close()
|
|
}
|
|
|
|
setConnectionStatus("Connecting...")
|
|
|
|
// Always use secure WebSocket protocol (wss)
|
|
const wsBaseUrl = apiUrl.replace(/^https?:\/\//, "wss://")
|
|
const wsUrl = `${wsBaseUrl}/share_poll?shareID=${shareId}`
|
|
console.log("Connecting to WebSocket URL:", wsUrl)
|
|
|
|
// Create WebSocket connection
|
|
socket = new WebSocket(wsUrl)
|
|
|
|
// Handle connection opening
|
|
socket.onopen = () => {
|
|
setConnectionStatus("Connected")
|
|
console.log("WebSocket connection established")
|
|
}
|
|
|
|
// Handle incoming messages
|
|
socket.onmessage = (event) => {
|
|
console.log("WebSocket message received")
|
|
try {
|
|
const data = JSON.parse(event.data) as Message
|
|
|
|
// Check if this is a session info message
|
|
if (data.key.startsWith("session/info/")) {
|
|
const infoContent = JSON.parse(data.content) as SessionInfo
|
|
setSessionInfo(infoContent)
|
|
console.log("Session info updated:", infoContent)
|
|
return
|
|
}
|
|
|
|
// Check if it's a system message
|
|
const msgContent = JSON.parse(data.content) as UIMessage
|
|
if (msgContent.role === "system") {
|
|
setSystemMessage(data)
|
|
console.log("System message updated:", data)
|
|
return
|
|
}
|
|
|
|
// Non-system messages
|
|
setMessages((prev) => {
|
|
// Check if message with this key already exists
|
|
const existingIndex = prev.findIndex((msg) => msg.key === data.key)
|
|
if (existingIndex >= 0) {
|
|
// Update existing message
|
|
const updated = [...prev]
|
|
updated[existingIndex] = data
|
|
return updated
|
|
} else {
|
|
// Add new message
|
|
return [...prev, data]
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.error("Error parsing WebSocket message:", error)
|
|
}
|
|
}
|
|
|
|
// Handle errors
|
|
socket.onerror = (error) => {
|
|
console.error("WebSocket error:", error)
|
|
setConnectionStatus("Error: Connection failed")
|
|
}
|
|
|
|
// Handle connection close and reconnection
|
|
socket.onclose = (event) => {
|
|
console.log(`WebSocket closed: ${event.code} ${event.reason}`)
|
|
setConnectionStatus("Disconnected, reconnecting...")
|
|
|
|
// Try to reconnect after 2 seconds
|
|
clearTimeout(reconnectTimer)
|
|
reconnectTimer = window.setTimeout(
|
|
setupWebSocket,
|
|
2000,
|
|
) as unknown as number
|
|
}
|
|
}
|
|
|
|
// Initial connection
|
|
setupWebSocket()
|
|
|
|
// Clean up on component unmount
|
|
onCleanup(() => {
|
|
console.log("Cleaning up WebSocket connection")
|
|
if (socket) {
|
|
socket.close()
|
|
}
|
|
clearTimeout(reconnectTimer)
|
|
})
|
|
})
|
|
|
|
return (
|
|
<main>
|
|
<h1>Share: {params.id}</h1>
|
|
|
|
<div style={{ margin: "2rem 0" }}>
|
|
<h2>WebSocket Connection</h2>
|
|
<p>
|
|
Status: <strong>{connectionStatus()}</strong>
|
|
</p>
|
|
|
|
<h3>Live Updates</h3>
|
|
|
|
<Show when={sessionInfo()}>
|
|
<div
|
|
style={{
|
|
padding: "1rem",
|
|
marginBottom: "1rem",
|
|
border: "1px solid #dee2e6",
|
|
}}
|
|
>
|
|
<h4 style={{ margin: "0 0 0.75rem 0" }}>Session Information</h4>
|
|
<div style={{ display: "flex", gap: "1.5rem" }}>
|
|
<div>
|
|
<strong>Input Tokens:</strong>{" "}
|
|
{sessionInfo()?.tokens?.input || 0}
|
|
</div>
|
|
<div>
|
|
<strong>Output Tokens:</strong>{" "}
|
|
{sessionInfo()?.tokens?.output || 0}
|
|
</div>
|
|
<div>
|
|
<strong>Reasoning Tokens:</strong>{" "}
|
|
{sessionInfo()?.tokens?.reasoning || 0}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
|
|
{/* Display system message as context in the Session Information block */}
|
|
<Show when={systemMessage()}>
|
|
<div
|
|
style={{
|
|
padding: "1rem",
|
|
marginBottom: "1rem",
|
|
border: "1px solid #dee2e6",
|
|
}}
|
|
>
|
|
<h4 style={{ margin: "0 0 0.75rem 0" }}>Context</h4>
|
|
{(() => {
|
|
try {
|
|
const parsed = JSON.parse(
|
|
systemMessage()?.content || "",
|
|
) as UIMessage
|
|
if (
|
|
parsed.parts &&
|
|
parsed.parts.length > 0 &&
|
|
parsed.parts[0].type === "text"
|
|
) {
|
|
const text = parsed.parts[0].text || ""
|
|
const lines = text.split("\n")
|
|
const visibleLines = expandedSystemMessage()
|
|
? lines
|
|
: lines.slice(0, 5)
|
|
const hasMoreLines = lines.length > 5
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
style={{
|
|
padding: "0.75rem",
|
|
border: "1px solid #dee2e6",
|
|
}}
|
|
>
|
|
{/* Create a modified version of the text part for the system message */}
|
|
{(() => {
|
|
// Create a modified part with truncated text
|
|
const modifiedPart = {
|
|
...parsed.parts[0],
|
|
text: visibleLines.join("\n"),
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<pre>{modifiedPart.text}</pre>
|
|
{hasMoreLines && !expandedSystemMessage() && (
|
|
<div
|
|
style={{
|
|
color: "#6c757d",
|
|
fontStyle: "italic",
|
|
marginTop: "0.5rem",
|
|
}}
|
|
>
|
|
{lines.length - 5} more lines...
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
})()}
|
|
</div>
|
|
{hasMoreLines && (
|
|
<button
|
|
onClick={() =>
|
|
setExpandedSystemMessage(!expandedSystemMessage())
|
|
}
|
|
style={{
|
|
marginTop: "0.5rem",
|
|
padding: "0.25rem 0.75rem",
|
|
border: "1px solid #ced4da",
|
|
cursor: "pointer",
|
|
fontSize: "0.875rem",
|
|
}}
|
|
>
|
|
{expandedSystemMessage() ? "Show Less" : "Show More"}
|
|
</button>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
} catch (e) {
|
|
return <div>Error parsing system message</div>
|
|
}
|
|
|
|
return null
|
|
})()}
|
|
</div>
|
|
</Show>
|
|
|
|
<div
|
|
style={{
|
|
border: "1px solid #ccc",
|
|
padding: "1rem",
|
|
maxHeight: "500px",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
<Show
|
|
when={messages().length > 0}
|
|
fallback={<p>Waiting for messages...</p>}
|
|
>
|
|
<ul style={{ listStyleType: "none", padding: 0 }}>
|
|
<For each={messages()}>
|
|
{(msg) => (
|
|
<li
|
|
style={{
|
|
padding: "0.75rem",
|
|
margin: "0.75rem 0",
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
}}
|
|
>
|
|
<div>
|
|
<strong>Key:</strong> {msg.key}
|
|
</div>
|
|
|
|
{(() => {
|
|
try {
|
|
const parsed = JSON.parse(msg.content) as UIMessage
|
|
const createdTime = parsed.metadata?.time?.created
|
|
? new Date(
|
|
parsed.metadata.time.created,
|
|
).toLocaleString()
|
|
: "Unknown time"
|
|
|
|
return (
|
|
<>
|
|
<div style={{ marginTop: "0.5rem" }}>
|
|
<strong>Full Content:</strong>
|
|
<pre
|
|
style={{
|
|
padding: "0.5rem",
|
|
overflow: "auto",
|
|
maxHeight: "150px",
|
|
whiteSpace: "pre-wrap",
|
|
wordBreak: "break-word",
|
|
fontSize: "0.85rem",
|
|
}}
|
|
>
|
|
{JSON.stringify(parsed, null, 2)}
|
|
</pre>
|
|
</div>
|
|
|
|
{parsed.parts && parsed.parts.length > 0 && (
|
|
<div style={{ marginTop: "0.75rem" }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: "0.25rem 0.5rem",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
<strong>
|
|
Role: {parsed.role || "Unknown"}
|
|
</strong>
|
|
<span
|
|
style={{
|
|
fontSize: "0.8rem",
|
|
color: "#6c757d",
|
|
}}
|
|
>
|
|
{createdTime}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
padding: "0.75rem",
|
|
border: "1px solid #dee2e6",
|
|
}}
|
|
>
|
|
<For
|
|
each={parsed.parts.filter(
|
|
(part) => part.type !== "step-start",
|
|
)}
|
|
>
|
|
{(part) => {
|
|
if (part.type === "text") {
|
|
//{
|
|
// "type": "text",
|
|
// "text": "Hello! How can I help you today?"
|
|
//}
|
|
return (
|
|
<pre>
|
|
[{part.type}] {part.text}{" "}
|
|
</pre>
|
|
)
|
|
}
|
|
if (part.type === "reasoning") {
|
|
//{
|
|
// "type": "reasoning",
|
|
// "text": "The user asked for a weather forecast. I should call the 'getWeather' tool with the location 'San Francisco'.",
|
|
// "providerMetadata": { "step_id": "reason_step_1" }
|
|
//}
|
|
return (
|
|
<pre>
|
|
[{part.type}] {part.text}
|
|
</pre>
|
|
)
|
|
}
|
|
if (part.type === "tool-invocation") {
|
|
return (
|
|
<div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: "0.3rem",
|
|
}}
|
|
>
|
|
<span>
|
|
<pre
|
|
style={{
|
|
margin: 0,
|
|
display: "inline",
|
|
}}
|
|
>
|
|
[{part.type}]
|
|
</pre>{" "}
|
|
Tool:{" "}
|
|
<strong>
|
|
{part.toolInvocation.toolName}
|
|
</strong>
|
|
</span>
|
|
{parsed.metadata?.tool?.[
|
|
part.toolInvocation.toolCallId
|
|
]?.time?.start &&
|
|
parsed.metadata?.tool?.[
|
|
part.toolInvocation.toolCallId
|
|
]?.time?.end && (
|
|
<span
|
|
style={{
|
|
color: "#6c757d",
|
|
fontSize: "0.8rem",
|
|
}}
|
|
>
|
|
{(
|
|
(new Date(
|
|
parsed.metadata?.tool?.[
|
|
part.toolInvocation.toolCallId
|
|
].time.end,
|
|
) -
|
|
new Date(
|
|
parsed.metadata?.tool?.[
|
|
part.toolInvocation.toolCallId
|
|
].time.start,
|
|
)) /
|
|
1000
|
|
).toFixed(2)}
|
|
s
|
|
</span>
|
|
)}
|
|
</div>
|
|
{(() => {
|
|
if (
|
|
part.toolInvocation.state ===
|
|
"partial-call"
|
|
) {
|
|
//{
|
|
// "type": "tool-invocation",
|
|
// "toolInvocation": {
|
|
// "state": "partial-call",
|
|
// "toolCallId": "tool_abc123",
|
|
// "toolName": "searchWeb",
|
|
// "argsTextDelta": "{\"query\":\"latest AI news"
|
|
// }
|
|
//}
|
|
return (
|
|
<>
|
|
<pre>
|
|
{
|
|
part.toolInvocation
|
|
.argsTextDelta
|
|
}
|
|
</pre>
|
|
<span>...</span>
|
|
</>
|
|
)
|
|
}
|
|
if (
|
|
part.toolInvocation.state ===
|
|
"call"
|
|
) {
|
|
//{
|
|
// "type": "tool-invocation",
|
|
// "toolInvocation": {
|
|
// "state": "call",
|
|
// "toolCallId": "tool_abc123",
|
|
// "toolName": "searchWeb",
|
|
// "args": { "query": "latest AI news", "count": 3 }
|
|
// }
|
|
//}
|
|
return (
|
|
<pre>
|
|
{JSON.stringify(
|
|
part.toolInvocation.args,
|
|
null,
|
|
2,
|
|
)}
|
|
</pre>
|
|
)
|
|
}
|
|
if (
|
|
part.toolInvocation.state ===
|
|
"result"
|
|
) {
|
|
//{
|
|
// "type": "tool-invocation",
|
|
// "toolInvocation": {
|
|
// "state": "result",
|
|
// "toolCallId": "tool_abc123",
|
|
// "toolName": "searchWeb",
|
|
// "args": { "query": "latest AI news", "count": 3 },
|
|
// "result": [
|
|
// { "title": "AI SDK v5 Announced", "url": "..." },
|
|
// { "title": "New LLM Achieves SOTA", "url": "..." }
|
|
// ]
|
|
// }
|
|
//}
|
|
return (
|
|
<>
|
|
<pre>
|
|
{JSON.stringify(
|
|
part.toolInvocation
|
|
.args,
|
|
null,
|
|
2,
|
|
)}
|
|
</pre>
|
|
<pre>
|
|
{JSON.stringify(
|
|
part.toolInvocation
|
|
.result,
|
|
null,
|
|
2,
|
|
)}
|
|
</pre>
|
|
</>
|
|
)
|
|
}
|
|
if (
|
|
part.toolInvocation.state ===
|
|
"error"
|
|
) {
|
|
//{
|
|
// "type": "tool-invocation",
|
|
// "toolInvocation": {
|
|
// "state": "error",
|
|
// "toolCallId": "tool_abc123",
|
|
// "toolName": "searchWeb",
|
|
// "args": { "query": "latest AI news", "count": 3 },
|
|
// "errorMessage": "API limit exceeded for searchWeb tool."
|
|
// }
|
|
//}
|
|
return (
|
|
<>
|
|
<pre>
|
|
{JSON.stringify(
|
|
part.toolInvocation
|
|
.args,
|
|
null,
|
|
2,
|
|
)}
|
|
</pre>
|
|
<pre>
|
|
{
|
|
part.toolInvocation
|
|
.errorMessage
|
|
}
|
|
</pre>
|
|
</>
|
|
)
|
|
}
|
|
})()}
|
|
</div>
|
|
)
|
|
}
|
|
if (part.type === "source") {
|
|
//{
|
|
// "type": "source",
|
|
// "source": {
|
|
// "sourceType": "url",
|
|
// "id": "doc_xyz789",
|
|
// "url": "https://example.com/research-paper.pdf",
|
|
// "title": "Groundbreaking AI Research Paper"
|
|
// }
|
|
//}
|
|
return (
|
|
<div>
|
|
<div>
|
|
<span>
|
|
<pre>[{part.type}]</pre>
|
|
</span>
|
|
<span>
|
|
Source:{" "}
|
|
{part.source.title ||
|
|
part.source.id}
|
|
</span>
|
|
</div>
|
|
{part.source.url && (
|
|
<div>
|
|
<a
|
|
href={part.source.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{ color: "#0c5460" }}
|
|
>
|
|
{part.source.url}
|
|
</a>
|
|
</div>
|
|
)}
|
|
{part.source.sourceType && (
|
|
<div>
|
|
Type: {part.source.sourceType}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
if (part.type === "file") {
|
|
//{
|
|
// "type": "file",
|
|
// "mediaType": "image/jpeg",
|
|
// "filename": "cat_photo.jpg",
|
|
// "url": "https://example-files.com/cats/cat_photo.jpg"
|
|
//}
|
|
const isImage =
|
|
part.mediaType?.startsWith("image/")
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<span>
|
|
<pre>[{part.type}]</pre>
|
|
</span>
|
|
<span>File: {part.filename}</span>
|
|
<span>{part.mediaType}</span>
|
|
</div>
|
|
|
|
{isImage && part.url ? (
|
|
<div>
|
|
<img
|
|
src={part.url}
|
|
alt={
|
|
part.filename ||
|
|
"Attached image"
|
|
}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{part.url ? (
|
|
<a
|
|
href={part.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Download: {part.filename}
|
|
</a>
|
|
) : (
|
|
<div>
|
|
File attachment (no URL
|
|
available)
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
return null
|
|
}}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
} catch (e) {
|
|
return (
|
|
<div>
|
|
<strong>Content:</strong>
|
|
<pre
|
|
style={{
|
|
padding: "0.5rem",
|
|
overflow: "auto",
|
|
maxHeight: "200px",
|
|
whiteSpace: "pre-wrap",
|
|
wordBreak: "break-word",
|
|
}}
|
|
>
|
|
{msg.content}
|
|
</pre>
|
|
</div>
|
|
)
|
|
}
|
|
})()}
|
|
</li>
|
|
)}
|
|
</For>
|
|
</ul>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|