From 093acd40628c63f0aafb48993f4c67d59b06c477 Mon Sep 17 00:00:00 2001 From: phact Date: Mon, 11 Aug 2025 21:50:30 -0400 Subject: [PATCH] show chat results --- frontend/src/app/chat/page.tsx | 207 ++++++++++++++++++++++++++------- 1 file changed, 166 insertions(+), 41 deletions(-) diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx index 06e5404b..b2b5f52b 100644 --- a/frontend/src/app/chat/page.tsx +++ b/frontend/src/app/chat/page.tsx @@ -411,14 +411,17 @@ function ChatPage() { // Handle Realtime API format (this is what you're actually getting!) else if (chunk.type === "response.output_item.added" && chunk.item?.type === "function_call") { - console.log("Function call started (Realtime API):", chunk.item.name) + console.log("🟢 CREATING function call (added):", chunk.item.id, chunk.item.tool_name || chunk.item.name) const functionCall: FunctionCall = { - name: chunk.item.name || "unknown", - arguments: undefined, + name: chunk.item.tool_name || chunk.item.name || "unknown", + arguments: chunk.item.inputs || undefined, status: "pending", - argumentsString: "" + argumentsString: "", + id: chunk.item.id, + type: chunk.item.type } currentFunctionCalls.push(functionCall) + console.log("🟢 Function calls now:", currentFunctionCalls.map(fc => ({ id: fc.id, name: fc.name }))) } // Handle function call arguments streaming (Realtime API) @@ -453,20 +456,43 @@ function ChatPage() { // Handle function call completion (Realtime API) else if (chunk.type === "response.output_item.done" && chunk.item?.type === "function_call") { - console.log("Function call done (Realtime API):", chunk.item.status) - const lastFunctionCall = currentFunctionCalls[currentFunctionCalls.length - 1] - if (lastFunctionCall) { - lastFunctionCall.status = chunk.item.status === "completed" ? "completed" : "error" + console.log("🔵 UPDATING function call (done):", chunk.item.id, chunk.item.tool_name || chunk.item.name) + console.log("🔵 Looking for existing function calls:", currentFunctionCalls.map(fc => ({ id: fc.id, name: fc.name }))) + + // Find existing function call by ID or name + let functionCall = currentFunctionCalls.find(fc => + fc.id === chunk.item.id || + fc.name === chunk.item.tool_name || + fc.name === chunk.item.name + ) + + if (functionCall) { + console.log("🔵 FOUND existing function call, updating:", functionCall.id, functionCall.name) + // Update existing function call with completion data + functionCall.status = chunk.item.status === "completed" ? "completed" : "error" + functionCall.id = chunk.item.id + functionCall.type = chunk.item.type + functionCall.name = chunk.item.tool_name || chunk.item.name || functionCall.name + functionCall.arguments = chunk.item.inputs || functionCall.arguments + + // Set results if present + if (chunk.item.results) { + functionCall.result = chunk.item.results + } + } else { + console.log("🔴 WARNING: Could not find existing function call to update:", chunk.item.id, chunk.item.tool_name, chunk.item.name) } } - // Handle tool call completion with results (new format) - else if (chunk.type === "response.output_item.done" && chunk.item?.type?.includes("_call")) { - console.log("Tool call done with results (new format):", chunk.item) + // Handle tool call completion with results + else if (chunk.type === "response.output_item.done" && chunk.item?.type?.includes("_call") && chunk.item?.type !== "function_call") { + console.log("Tool call done with results:", chunk.item) // Find existing function call by ID, or by name/type if ID not available let functionCall = currentFunctionCalls.find(fc => fc.id === chunk.item.id || + (fc.name === chunk.item.tool_name) || + (fc.name === chunk.item.name) || (fc.name === chunk.item.type) || (fc.name.includes(chunk.item.type.replace('_call', '')) || chunk.item.type.includes(fc.name)) ) @@ -483,10 +509,9 @@ function ChatPage() { functionCall.result = chunk.item.results } } else { - // Only create new if we really can't find an existing one - console.log("Creating new function call for:", chunk.item.type) + // Create new function call if not found functionCall = { - name: chunk.item.type || "unknown", + name: chunk.item.tool_name || chunk.item.name || chunk.item.type || "unknown", arguments: chunk.item.inputs || {}, status: "completed" as const, id: chunk.item.id, @@ -498,16 +523,17 @@ function ChatPage() { } // Handle function call output item added (new format) - else if (chunk.type === "response.output_item.added" && chunk.item?.type?.includes("_call")) { - console.log("Tool call started (new format):", chunk.item) + else if (chunk.type === "response.output_item.added" && chunk.item?.type?.includes("_call") && chunk.item?.type !== "function_call") { + console.log("🟡 CREATING tool call (added):", chunk.item.id, chunk.item.tool_name || chunk.item.name, chunk.item.type) const functionCall = { - name: chunk.item.type || "unknown", + name: chunk.item.tool_name || chunk.item.name || chunk.item.type || "unknown", arguments: chunk.item.inputs || {}, status: "pending" as const, id: chunk.item.id, type: chunk.item.type } currentFunctionCalls.push(functionCall) + console.log("🟡 Function calls now:", currentFunctionCalls.map(fc => ({ id: fc.id, name: fc.name, type: fc.type }))) } // Handle function call results @@ -698,6 +724,11 @@ function ChatPage() { const functionCallId = `${messageIndex || 'streaming'}-${index}` const isExpanded = expandedFunctionCalls.has(functionCallId) + // Determine display name - show both name and type if available + const displayName = fc.type && fc.type !== fc.name + ? `${fc.name} (${fc.type})` + : fc.name + return (
- Function Call: {fc.name} + Function Call: {displayName} + {fc.id && ( + + {fc.id.substring(0, 8)}... + + )}
+ {/* Show type information if available */} + {fc.type && ( +
+ Type: + + {fc.type} + +
+ )} + + {/* Show ID if available */} + {fc.id && ( +
+ ID: + + {fc.id} + +
+ )} + {/* Show arguments - either completed or streaming */} {(fc.arguments || fc.argumentsString) && (
@@ -742,30 +798,99 @@ function ChatPage() { Result: {Array.isArray(fc.result) ? (
- {fc.result.map((result, idx) => ( -
- {result.data?.file_path && ( -
- 📄 {result.data.file_path || "Unknown file"} -
- )} - {result.data?.text && ( -
- {result.data.text.length > 300 - ? result.data.text.substring(0, 300) + "..." - : result.data.text - } -
- )} - {result.text_key && ( -
- Key: {result.text_key} -
- )} -
- ))} + {(() => { + // Handle different result formats + let resultsToRender = fc.result + + // Check if this is function_call format with nested results + // Function call format: results = [{ results: [...] }] + // Tool call format: results = [{ text_key: ..., data: {...} }] + if (fc.result.length > 0 && + fc.result[0]?.results && + Array.isArray(fc.result[0].results) && + !fc.result[0].text_key) { + resultsToRender = fc.result[0].results + } + + return resultsToRender.map((result: any, idx: number) => ( +
+ {/* Handle tool_call format (file_path in data) */} + {result.data?.file_path && ( +
+ 📄 {result.data.file_path || "Unknown file"} +
+ )} + + {/* Handle function_call format (filename directly) */} + {result.filename && !result.data?.file_path && ( +
+ 📄 {result.filename} + {result.page && ` (page ${result.page})`} + {result.score && ( + + Score: {result.score.toFixed(3)} + + )} +
+ )} + + {/* Handle tool_call text format */} + {result.data?.text && ( +
+ {result.data.text.length > 300 + ? result.data.text.substring(0, 300) + "..." + : result.data.text + } +
+ )} + + {/* Handle function_call text format */} + {result.text && !result.data?.text && ( +
+ {result.text.length > 300 + ? result.text.substring(0, 300) + "..." + : result.text + } +
+ )} + + {/* Show additional metadata for function_call format */} + {result.source_url && ( + + )} + + {result.text_key && ( +
+ Key: {result.text_key} +
+ )} +
+ )) + })()}
- Found {fc.result.length} result{fc.result.length !== 1 ? 's' : ''} + Found {(() => { + let resultsToCount = fc.result + if (fc.result.length > 0 && + fc.result[0]?.results && + Array.isArray(fc.result[0].results) && + !fc.result[0].text_key) { + resultsToCount = fc.result[0].results + } + return resultsToCount.length + })()} result{(() => { + let resultsToCount = fc.result + if (fc.result.length > 0 && + fc.result[0]?.results && + Array.isArray(fc.result[0].results) && + !fc.result[0].text_key) { + resultsToCount = fc.result[0].results + } + return resultsToCount.length !== 1 ? 's' : '' + })()}
) : (