✨ (frontend): Add ChevronDown and ChevronUp icons to toggle code component expansion
♻️ (frontend): Refactor CodeComponent to use memoization for line count, collapse logic, and preview code 📝 (frontend): Update MarkdownRenderer to use memoized components for improved performance and readability
This commit is contained in:
cristhianzl
parent
8dc737c124
commit
309e53d4f7
3 changed files with 348 additions and 169 deletions
|
|
@ -1,7 +1,6 @@
|
|||
import { Check, Copy } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
||||
import { Check, ChevronDown, ChevronUp, Copy } from "lucide-react";
|
||||
import { memo, useMemo, useState } from "react";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
type CodeComponentProps = {
|
||||
|
|
@ -9,8 +8,23 @@ type CodeComponentProps = {
|
|||
language: string;
|
||||
};
|
||||
|
||||
export default function CodeComponent({ code, language }: CodeComponentProps) {
|
||||
const CodeComponent = memo(function CodeComponent({
|
||||
code,
|
||||
language,
|
||||
}: CodeComponentProps) {
|
||||
const [isCopied, setIsCopied] = useState<boolean>(false);
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
const { lineCount, shouldCollapse, previewCode } = useMemo(() => {
|
||||
const lines = code.split("\n");
|
||||
const lineCount = lines.length;
|
||||
const shouldCollapse = lineCount > 10;
|
||||
const previewCode = shouldCollapse
|
||||
? lines.slice(0, 8).join("\n") + "\n..."
|
||||
: code;
|
||||
|
||||
return { lineCount, shouldCollapse, previewCode };
|
||||
}, [code]);
|
||||
|
||||
const copyToClipboard = () => {
|
||||
if (!navigator.clipboard || !navigator.clipboard.writeText) {
|
||||
|
|
@ -26,31 +40,111 @@ export default function CodeComponent({ code, language }: CodeComponentProps) {
|
|||
});
|
||||
};
|
||||
|
||||
const displayCode = shouldCollapse && !isExpanded ? previewCode : code;
|
||||
const maxHeight = isExpanded ? "600px" : shouldCollapse ? "200px" : "400px";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="mt-2 relative flex w-full flex-col overflow-hidden rounded-md text-left dark"
|
||||
className="mt-2 mb-4 relative flex w-full max-w-full flex-col overflow-hidden rounded-lg border border-border bg-muted/30 text-left"
|
||||
data-testid="chat-code-tab"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground hover:bg-card absolute top-2 right-2"
|
||||
data-testid="copy-code-button"
|
||||
onClick={copyToClipboard}
|
||||
>
|
||||
{isCopied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
{/* Header with language and controls */}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-border bg-muted/50">
|
||||
<div className="flex items-center gap-2">
|
||||
{language && (
|
||||
<Badge variant="secondary" className="text-xs font-mono">
|
||||
{language.toLowerCase()}
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{lineCount} line{lineCount !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{shouldCollapse && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<>
|
||||
<ChevronUp className="h-3 w-3 mr-1" />
|
||||
Collapse
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="h-3 w-3 mr-1" />
|
||||
Expand
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-muted-foreground hover:text-foreground"
|
||||
data-testid="copy-code-button"
|
||||
onClick={copyToClipboard}
|
||||
>
|
||||
{isCopied ? (
|
||||
<>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
Copied
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-3 w-3 mr-1" />
|
||||
Copy
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code content */}
|
||||
<div className="relative overflow-hidden" style={{ maxHeight }}>
|
||||
<div
|
||||
className="overflow-auto max-h-full"
|
||||
style={{
|
||||
maxHeight: maxHeight,
|
||||
scrollBehavior: "auto",
|
||||
overscrollBehavior: "auto",
|
||||
scrollbarGutter: "stable",
|
||||
backgroundColor: "hsl(var(--muted))",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="text-sm font-mono leading-relaxed whitespace-pre-wrap text-foreground"
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
lineHeight: "1.6",
|
||||
fontFamily:
|
||||
'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "anywhere",
|
||||
whiteSpace: "pre-wrap",
|
||||
overflowAnchor: "none",
|
||||
padding: "12px 16px 12px 16px",
|
||||
margin: "0",
|
||||
backgroundColor: "hsl(var(--muted))",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
>
|
||||
{displayCode}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fade overlay for collapsed state */}
|
||||
{shouldCollapse && !isExpanded && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-muted/30 to-transparent pointer-events-none" />
|
||||
)}
|
||||
</Button>
|
||||
<SyntaxHighlighter
|
||||
language={language.toLowerCase()}
|
||||
style={tomorrow}
|
||||
className="!mt-0 h-full w-full overflow-scroll !rounded-b-md !rounded-t-none border border-border text-left !custom-scroll !text-sm"
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default CodeComponent;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
import { useMemo } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import rehypeMathjax from "rehype-mathjax";
|
||||
import rehypeRaw from "rehype-raw";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { cn } from "@/lib/utils";
|
||||
import CodeComponent from "./code-component";
|
||||
|
||||
type MarkdownRendererProps = {
|
||||
|
|
@ -48,92 +49,176 @@ export const cleanupTableEmptyCells = (text: string): string => {
|
|||
})
|
||||
.join("\n");
|
||||
};
|
||||
|
||||
export const MarkdownRenderer = ({ chatMessage }: MarkdownRendererProps) => {
|
||||
// Process the chat message to handle <think> tags and clean up tables
|
||||
const processedChatMessage = preprocessChatMessage(chatMessage);
|
||||
|
||||
// Memoize the components object to prevent CodeComponent recreation
|
||||
const markdownComponents = useMemo(
|
||||
() => ({
|
||||
p({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return (
|
||||
<p className="leading-relaxed mb-2 last:mb-0">{props.children}</p>
|
||||
);
|
||||
},
|
||||
ol({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return <ol className="max-w-full space-y-1">{props.children}</ol>;
|
||||
},
|
||||
ul({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return <ul className="max-w-full space-y-1">{props.children}</ul>;
|
||||
},
|
||||
li({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return <li className="leading-relaxed">{props.children}</li>;
|
||||
},
|
||||
h1({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return (
|
||||
<h1 className="text-2xl font-semibold mb-4 mt-6 first:mt-0">
|
||||
{props.children}
|
||||
</h1>
|
||||
);
|
||||
},
|
||||
h2({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return (
|
||||
<h2 className="text-xl font-semibold mb-3 mt-5 first:mt-0">
|
||||
{props.children}
|
||||
</h2>
|
||||
);
|
||||
},
|
||||
h3({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return (
|
||||
<h3 className="text-lg font-semibold mb-2 mt-4 first:mt-0">
|
||||
{props.children}
|
||||
</h3>
|
||||
);
|
||||
},
|
||||
h4({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return (
|
||||
<h4 className="text-base font-semibold mb-2 mt-3 first:mt-0">
|
||||
{props.children}
|
||||
</h4>
|
||||
);
|
||||
},
|
||||
hr({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return <hr className="w-full my-6 border-border" />;
|
||||
},
|
||||
blockquote({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return (
|
||||
<blockquote className="border-l-4 border-primary/30 bg-muted/50 px-4 py-3 my-4 rounded-r-md italic">
|
||||
{props.children}
|
||||
</blockquote>
|
||||
);
|
||||
},
|
||||
pre({ node, ...props }: { node?: any; [key: string]: any }) {
|
||||
return <>{props.children}</>;
|
||||
},
|
||||
table: ({ node, ...props }: { node?: any; [key: string]: any }) => {
|
||||
return (
|
||||
<div className="my-6 max-w-full overflow-hidden rounded-lg border border-border bg-muted/30">
|
||||
<div className="max-h-[600px] w-full overflow-auto">
|
||||
<table className="w-full text-sm">{props.children}</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
thead: ({ node, ...props }: { node?: any; [key: string]: any }) => {
|
||||
return (
|
||||
<thead className="bg-muted/70 border-b border-border">
|
||||
{props.children}
|
||||
</thead>
|
||||
);
|
||||
},
|
||||
tbody: ({ node, ...props }: { node?: any; [key: string]: any }) => {
|
||||
return (
|
||||
<tbody className="divide-y divide-border">{props.children}</tbody>
|
||||
);
|
||||
},
|
||||
th: ({ node, ...props }: { node?: any; [key: string]: any }) => {
|
||||
return (
|
||||
<th className="px-4 py-3 text-left font-medium text-foreground">
|
||||
{props.children}
|
||||
</th>
|
||||
);
|
||||
},
|
||||
td: ({ node, ...props }: { node?: any; [key: string]: any }) => {
|
||||
return (
|
||||
<td className="px-4 py-3 text-muted-foreground">{props.children}</td>
|
||||
);
|
||||
},
|
||||
code: ({
|
||||
node,
|
||||
className,
|
||||
inline,
|
||||
children,
|
||||
...props
|
||||
}: {
|
||||
node?: any;
|
||||
[key: string]: any;
|
||||
}) => {
|
||||
let content = children as string;
|
||||
if (
|
||||
Array.isArray(children) &&
|
||||
children.length === 1 &&
|
||||
typeof children[0] === "string"
|
||||
) {
|
||||
content = children[0] as string;
|
||||
}
|
||||
if (typeof content === "string") {
|
||||
if (content.length) {
|
||||
if (content[0] === "▍") {
|
||||
return <span className="form-modal-markdown-span"></span>;
|
||||
}
|
||||
|
||||
// Specifically handle <think> tags that were wrapped in backticks
|
||||
if (content === "<think>" || content === "</think>") {
|
||||
return (
|
||||
<span className="text-muted-foreground font-mono text-sm">
|
||||
{content}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
|
||||
return !inline ? (
|
||||
<CodeComponent
|
||||
key={`${content.slice(0, 50)}-${(match && match[1]) || ""}`}
|
||||
language={(match && match[1]) || ""}
|
||||
code={String(content).replace(/\n$/, "")}
|
||||
/>
|
||||
) : (
|
||||
<code
|
||||
className="bg-muted/60 text-foreground px-1.5 py-0.5 rounded text-sm font-mono border border-border/50"
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"markdown prose flex w-full max-w-full flex-col items-baseline text-base font-normal word-break-break-word dark:prose-invert",
|
||||
!chatMessage ? "text-muted-foreground" : "text-primary",
|
||||
!chatMessage ? "text-muted-foreground" : "text-foreground",
|
||||
// Chat-optimized prose styling
|
||||
"prose-sm md:prose-base prose-pre:!m-0 prose-pre:!p-0",
|
||||
"prose-headings:font-semibold prose-headings:tracking-tight",
|
||||
"prose-p:leading-relaxed prose-p:mb-4",
|
||||
"prose-li:my-1 prose-ul:my-2 prose-ol:my-2",
|
||||
"prose-blockquote:border-l-primary/30 prose-blockquote:bg-muted/50 prose-blockquote:px-4 prose-blockquote:py-2 prose-blockquote:rounded-r-md"
|
||||
)}
|
||||
>
|
||||
<Markdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[rehypeMathjax, rehypeRaw]}
|
||||
linkTarget="_blank"
|
||||
components={{
|
||||
p({ node, ...props }) {
|
||||
return <p className="w-fit max-w-full">{props.children}</p>;
|
||||
},
|
||||
ol({ node, ...props }) {
|
||||
return <ol className="max-w-full">{props.children}</ol>;
|
||||
},
|
||||
h1({ node, ...props }) {
|
||||
return <h1 className="mb-6 mt-4">{props.children}</h1>;
|
||||
},
|
||||
h2({ node, ...props }) {
|
||||
return <h2 className="mb-4 mt-4">{props.children}</h2>;
|
||||
},
|
||||
h3({ node, ...props }) {
|
||||
return <h3 className="mb-2 mt-4">{props.children}</h3>;
|
||||
},
|
||||
hr({ node, ...props }) {
|
||||
return <hr className="w-full mt-4 mb-8" />;
|
||||
},
|
||||
ul({ node, ...props }) {
|
||||
return <ul className="max-w-full mb-2">{props.children}</ul>;
|
||||
},
|
||||
pre({ node, ...props }) {
|
||||
return <>{props.children}</>;
|
||||
},
|
||||
table: ({ node, ...props }) => {
|
||||
return (
|
||||
<div className="max-w-full overflow-hidden rounded-md border bg-muted">
|
||||
<div className="max-h-[600px] w-full overflow-auto p-4">
|
||||
<table className="!my-0 w-full">{props.children}</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
code: ({ node, className, inline, children, ...props }) => {
|
||||
let content = children as string;
|
||||
if (
|
||||
Array.isArray(children) &&
|
||||
children.length === 1 &&
|
||||
typeof children[0] === "string"
|
||||
) {
|
||||
content = children[0] as string;
|
||||
}
|
||||
if (typeof content === "string") {
|
||||
if (content.length) {
|
||||
if (content[0] === "▍") {
|
||||
return <span className="form-modal-markdown-span"></span>;
|
||||
}
|
||||
|
||||
// Specifically handle <think> tags that were wrapped in backticks
|
||||
if (content === "<think>" || content === "</think>") {
|
||||
return <span>{content}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
|
||||
return !inline ? (
|
||||
<CodeComponent
|
||||
language={(match && match[1]) || ""}
|
||||
code={String(content).replace(/\n$/, "")}
|
||||
/>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{content}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
},
|
||||
}}
|
||||
components={markdownComponents}
|
||||
>
|
||||
{processedChatMessage}
|
||||
</Markdown>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
"use client";
|
||||
|
||||
import { MarkdownRenderer } from "@/components/markdown-renderer";
|
||||
import { ProtectedRoute } from "@/components/protected-route";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { type EndpointType, useChat } from "@/contexts/chat-context";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import { useLoadingStore } from "@/stores/loadingStore";
|
||||
import {
|
||||
AtSign,
|
||||
Bot,
|
||||
|
|
@ -15,15 +24,6 @@ import {
|
|||
Zap,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { MarkdownRenderer } from "@/components/markdown-renderer";
|
||||
import { ProtectedRoute } from "@/components/protected-route";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { type EndpointType, useChat } from "@/contexts/chat-context";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import { useLoadingStore } from "@/stores/loadingStore";
|
||||
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
|
||||
import Nudges from "./nudges";
|
||||
|
||||
|
|
@ -194,7 +194,7 @@ function ChatPage() {
|
|||
"Upload failed with status:",
|
||||
response.status,
|
||||
"Response:",
|
||||
errorText,
|
||||
errorText
|
||||
);
|
||||
throw new Error("Failed to process document");
|
||||
}
|
||||
|
|
@ -448,7 +448,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Loading conversation with",
|
||||
conversationData.messages.length,
|
||||
"messages",
|
||||
"messages"
|
||||
);
|
||||
// Convert backend message format to frontend Message interface
|
||||
const convertedMessages: Message[] = conversationData.messages.map(
|
||||
|
|
@ -576,7 +576,7 @@ function ChatPage() {
|
|||
) === "string"
|
||||
? toolCall.function?.arguments || toolCall.arguments
|
||||
: JSON.stringify(
|
||||
toolCall.function?.arguments || toolCall.arguments,
|
||||
toolCall.function?.arguments || toolCall.arguments
|
||||
),
|
||||
result: toolCall.result,
|
||||
status: "completed",
|
||||
|
|
@ -595,7 +595,7 @@ function ChatPage() {
|
|||
}
|
||||
|
||||
return message;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setMessages(convertedMessages);
|
||||
|
|
@ -684,7 +684,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Chat page received file upload error event:",
|
||||
filename,
|
||||
error,
|
||||
error
|
||||
);
|
||||
|
||||
// Replace the last message with error message
|
||||
|
|
@ -698,37 +698,37 @@ function ChatPage() {
|
|||
|
||||
window.addEventListener(
|
||||
"fileUploadStart",
|
||||
handleFileUploadStart as EventListener,
|
||||
handleFileUploadStart as EventListener
|
||||
);
|
||||
window.addEventListener(
|
||||
"fileUploaded",
|
||||
handleFileUploaded as EventListener,
|
||||
handleFileUploaded as EventListener
|
||||
);
|
||||
window.addEventListener(
|
||||
"fileUploadComplete",
|
||||
handleFileUploadComplete as EventListener,
|
||||
handleFileUploadComplete as EventListener
|
||||
);
|
||||
window.addEventListener(
|
||||
"fileUploadError",
|
||||
handleFileUploadError as EventListener,
|
||||
handleFileUploadError as EventListener
|
||||
);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener(
|
||||
"fileUploadStart",
|
||||
handleFileUploadStart as EventListener,
|
||||
handleFileUploadStart as EventListener
|
||||
);
|
||||
window.removeEventListener(
|
||||
"fileUploaded",
|
||||
handleFileUploaded as EventListener,
|
||||
handleFileUploaded as EventListener
|
||||
);
|
||||
window.removeEventListener(
|
||||
"fileUploadComplete",
|
||||
handleFileUploadComplete as EventListener,
|
||||
handleFileUploadComplete as EventListener
|
||||
);
|
||||
window.removeEventListener(
|
||||
"fileUploadError",
|
||||
handleFileUploadError as EventListener,
|
||||
handleFileUploadError as EventListener
|
||||
);
|
||||
};
|
||||
}, [endpoint, setPreviousResponseIds]);
|
||||
|
|
@ -755,7 +755,7 @@ function ChatPage() {
|
|||
}, [isFilterDropdownOpen]);
|
||||
|
||||
const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
|
||||
previousResponseIds[endpoint],
|
||||
previousResponseIds[endpoint]
|
||||
);
|
||||
|
||||
const handleSSEStream = async (userMessage: Message) => {
|
||||
|
|
@ -860,7 +860,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Received chunk:",
|
||||
chunk.type || chunk.object,
|
||||
chunk,
|
||||
chunk
|
||||
);
|
||||
|
||||
// Extract response ID if present
|
||||
|
|
@ -876,14 +876,14 @@ function ChatPage() {
|
|||
if (chunk.delta.function_call) {
|
||||
console.log(
|
||||
"Function call in delta:",
|
||||
chunk.delta.function_call,
|
||||
chunk.delta.function_call
|
||||
);
|
||||
|
||||
// Check if this is a new function call
|
||||
if (chunk.delta.function_call.name) {
|
||||
console.log(
|
||||
"New function call:",
|
||||
chunk.delta.function_call.name,
|
||||
chunk.delta.function_call.name
|
||||
);
|
||||
const functionCall: FunctionCall = {
|
||||
name: chunk.delta.function_call.name,
|
||||
|
|
@ -899,7 +899,7 @@ function ChatPage() {
|
|||
else if (chunk.delta.function_call.arguments) {
|
||||
console.log(
|
||||
"Function call arguments delta:",
|
||||
chunk.delta.function_call.arguments,
|
||||
chunk.delta.function_call.arguments
|
||||
);
|
||||
const lastFunctionCall =
|
||||
currentFunctionCalls[currentFunctionCalls.length - 1];
|
||||
|
|
@ -911,14 +911,14 @@ function ChatPage() {
|
|||
chunk.delta.function_call.arguments;
|
||||
console.log(
|
||||
"Accumulated arguments:",
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
|
||||
// Try to parse arguments if they look complete
|
||||
if (lastFunctionCall.argumentsString.includes("}")) {
|
||||
try {
|
||||
const parsed = JSON.parse(
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
lastFunctionCall.arguments = parsed;
|
||||
lastFunctionCall.status = "completed";
|
||||
|
|
@ -926,7 +926,7 @@ function ChatPage() {
|
|||
} catch (e) {
|
||||
console.log(
|
||||
"Arguments not yet complete or invalid JSON:",
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -959,7 +959,7 @@ function ChatPage() {
|
|||
else if (toolCall.function.arguments) {
|
||||
console.log(
|
||||
"Tool call arguments delta:",
|
||||
toolCall.function.arguments,
|
||||
toolCall.function.arguments
|
||||
);
|
||||
const lastFunctionCall =
|
||||
currentFunctionCalls[
|
||||
|
|
@ -973,7 +973,7 @@ function ChatPage() {
|
|||
toolCall.function.arguments;
|
||||
console.log(
|
||||
"Accumulated tool arguments:",
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
|
||||
// Try to parse arguments if they look complete
|
||||
|
|
@ -982,7 +982,7 @@ function ChatPage() {
|
|||
) {
|
||||
try {
|
||||
const parsed = JSON.parse(
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
lastFunctionCall.arguments = parsed;
|
||||
lastFunctionCall.status = "completed";
|
||||
|
|
@ -990,7 +990,7 @@ function ChatPage() {
|
|||
} catch (e) {
|
||||
console.log(
|
||||
"Tool arguments not yet complete or invalid JSON:",
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1022,7 +1022,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Error parsing function call on finish:",
|
||||
fc,
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1038,12 +1038,12 @@ function ChatPage() {
|
|||
console.log(
|
||||
"🟢 CREATING function call (added):",
|
||||
chunk.item.id,
|
||||
chunk.item.tool_name || chunk.item.name,
|
||||
chunk.item.tool_name || chunk.item.name
|
||||
);
|
||||
|
||||
// Try to find an existing pending call to update (created by earlier deltas)
|
||||
let existing = currentFunctionCalls.find(
|
||||
(fc) => fc.id === chunk.item.id,
|
||||
(fc) => fc.id === chunk.item.id
|
||||
);
|
||||
if (!existing) {
|
||||
existing = [...currentFunctionCalls]
|
||||
|
|
@ -1052,7 +1052,7 @@ function ChatPage() {
|
|||
(fc) =>
|
||||
fc.status === "pending" &&
|
||||
!fc.id &&
|
||||
fc.name === (chunk.item.tool_name || chunk.item.name),
|
||||
fc.name === (chunk.item.tool_name || chunk.item.name)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1065,7 +1065,7 @@ function ChatPage() {
|
|||
chunk.item.inputs || existing.arguments;
|
||||
console.log(
|
||||
"🟢 UPDATED existing pending function call with id:",
|
||||
existing.id,
|
||||
existing.id
|
||||
);
|
||||
} else {
|
||||
const functionCall: FunctionCall = {
|
||||
|
|
@ -1083,7 +1083,7 @@ function ChatPage() {
|
|||
currentFunctionCalls.map((fc) => ({
|
||||
id: fc.id,
|
||||
name: fc.name,
|
||||
})),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1094,7 +1094,7 @@ function ChatPage() {
|
|||
) {
|
||||
console.log(
|
||||
"Function args delta (Realtime API):",
|
||||
chunk.delta,
|
||||
chunk.delta
|
||||
);
|
||||
const lastFunctionCall =
|
||||
currentFunctionCalls[currentFunctionCalls.length - 1];
|
||||
|
|
@ -1105,7 +1105,7 @@ function ChatPage() {
|
|||
lastFunctionCall.argumentsString += chunk.delta || "";
|
||||
console.log(
|
||||
"Accumulated arguments (Realtime API):",
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1116,26 +1116,26 @@ function ChatPage() {
|
|||
) {
|
||||
console.log(
|
||||
"Function args done (Realtime API):",
|
||||
chunk.arguments,
|
||||
chunk.arguments
|
||||
);
|
||||
const lastFunctionCall =
|
||||
currentFunctionCalls[currentFunctionCalls.length - 1];
|
||||
if (lastFunctionCall) {
|
||||
try {
|
||||
lastFunctionCall.arguments = JSON.parse(
|
||||
chunk.arguments || "{}",
|
||||
chunk.arguments || "{}"
|
||||
);
|
||||
lastFunctionCall.status = "completed";
|
||||
console.log(
|
||||
"Parsed function arguments (Realtime API):",
|
||||
lastFunctionCall.arguments,
|
||||
lastFunctionCall.arguments
|
||||
);
|
||||
} catch (e) {
|
||||
lastFunctionCall.arguments = { raw: chunk.arguments };
|
||||
lastFunctionCall.status = "error";
|
||||
console.log(
|
||||
"Error parsing function arguments (Realtime API):",
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1149,14 +1149,14 @@ function ChatPage() {
|
|||
console.log(
|
||||
"🔵 UPDATING function call (done):",
|
||||
chunk.item.id,
|
||||
chunk.item.tool_name || chunk.item.name,
|
||||
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
|
||||
|
|
@ -1164,14 +1164,14 @@ function ChatPage() {
|
|||
(fc) =>
|
||||
fc.id === chunk.item.id ||
|
||||
fc.name === chunk.item.tool_name ||
|
||||
fc.name === chunk.item.name,
|
||||
fc.name === chunk.item.name
|
||||
);
|
||||
|
||||
if (functionCall) {
|
||||
console.log(
|
||||
"🔵 FOUND existing function call, updating:",
|
||||
functionCall.id,
|
||||
functionCall.name,
|
||||
functionCall.name
|
||||
);
|
||||
// Update existing function call with completion data
|
||||
functionCall.status =
|
||||
|
|
@ -1194,7 +1194,7 @@ function ChatPage() {
|
|||
"🔴 WARNING: Could not find existing function call to update:",
|
||||
chunk.item.id,
|
||||
chunk.item.tool_name,
|
||||
chunk.item.name,
|
||||
chunk.item.name
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1215,7 +1215,7 @@ function ChatPage() {
|
|||
fc.name === chunk.item.name ||
|
||||
fc.name === chunk.item.type ||
|
||||
fc.name.includes(chunk.item.type.replace("_call", "")) ||
|
||||
chunk.item.type.includes(fc.name),
|
||||
chunk.item.type.includes(fc.name)
|
||||
);
|
||||
|
||||
if (functionCall) {
|
||||
|
|
@ -1259,12 +1259,12 @@ function ChatPage() {
|
|||
"🟡 CREATING tool call (added):",
|
||||
chunk.item.id,
|
||||
chunk.item.tool_name || chunk.item.name,
|
||||
chunk.item.type,
|
||||
chunk.item.type
|
||||
);
|
||||
|
||||
// Dedupe by id or pending with same name
|
||||
let existing = currentFunctionCalls.find(
|
||||
(fc) => fc.id === chunk.item.id,
|
||||
(fc) => fc.id === chunk.item.id
|
||||
);
|
||||
if (!existing) {
|
||||
existing = [...currentFunctionCalls]
|
||||
|
|
@ -1276,7 +1276,7 @@ function ChatPage() {
|
|||
fc.name ===
|
||||
(chunk.item.tool_name ||
|
||||
chunk.item.name ||
|
||||
chunk.item.type),
|
||||
chunk.item.type)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1292,7 +1292,7 @@ function ChatPage() {
|
|||
chunk.item.inputs || existing.arguments;
|
||||
console.log(
|
||||
"🟡 UPDATED existing pending tool call with id:",
|
||||
existing.id,
|
||||
existing.id
|
||||
);
|
||||
} else {
|
||||
const functionCall = {
|
||||
|
|
@ -1313,7 +1313,7 @@ function ChatPage() {
|
|||
id: fc.id,
|
||||
name: fc.name,
|
||||
type: fc.type,
|
||||
})),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1591,7 +1591,7 @@ function ChatPage() {
|
|||
|
||||
const handleForkConversation = (
|
||||
messageIndex: number,
|
||||
event?: React.MouseEvent,
|
||||
event?: React.MouseEvent
|
||||
) => {
|
||||
// Prevent any default behavior and stop event propagation
|
||||
if (event) {
|
||||
|
|
@ -1656,7 +1656,7 @@ function ChatPage() {
|
|||
|
||||
const renderFunctionCalls = (
|
||||
functionCalls: FunctionCall[],
|
||||
messageIndex?: number,
|
||||
messageIndex?: number
|
||||
) => {
|
||||
if (!functionCalls || functionCalls.length === 0) return null;
|
||||
|
||||
|
|
@ -1734,7 +1734,7 @@ function ChatPage() {
|
|||
{(fc.arguments || fc.argumentsString) && (
|
||||
<div className="text-xs text-muted-foreground mb-3">
|
||||
<span className="font-medium">Arguments:</span>
|
||||
<pre className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
|
||||
<pre className="my-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
|
||||
{fc.arguments
|
||||
? JSON.stringify(fc.arguments, null, 2)
|
||||
: fc.argumentsString || "..."}
|
||||
|
|
@ -1870,7 +1870,7 @@ function ChatPage() {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<pre className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
|
||||
<pre className="my-1 p-2 bg-muted/30 rounded text-xs overflow-x-auto">
|
||||
{JSON.stringify(fc.result, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
|
|
@ -2024,7 +2024,7 @@ function ChatPage() {
|
|||
<div className="flex-1 min-w-0">
|
||||
{renderFunctionCalls(
|
||||
message.functionCalls || [],
|
||||
index,
|
||||
index
|
||||
)}
|
||||
<MarkdownRenderer chatMessage={message.content} />
|
||||
</div>
|
||||
|
|
@ -2053,7 +2053,7 @@ function ChatPage() {
|
|||
<div className="flex-1">
|
||||
{renderFunctionCalls(
|
||||
streamingMessage.functionCalls,
|
||||
messages.length,
|
||||
messages.length
|
||||
)}
|
||||
<MarkdownRenderer
|
||||
chatMessage={streamingMessage.content}
|
||||
|
|
@ -2196,7 +2196,7 @@ function ChatPage() {
|
|||
const filteredFilters = availableFilters.filter((filter) =>
|
||||
filter.name
|
||||
.toLowerCase()
|
||||
.includes(filterSearchTerm.toLowerCase()),
|
||||
.includes(filterSearchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
if (e.key === "Escape") {
|
||||
|
|
@ -2214,7 +2214,7 @@ function ChatPage() {
|
|||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setSelectedFilterIndex((prev) =>
|
||||
prev < filteredFilters.length - 1 ? prev + 1 : 0,
|
||||
prev < filteredFilters.length - 1 ? prev + 1 : 0
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
|
@ -2222,7 +2222,7 @@ function ChatPage() {
|
|||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setSelectedFilterIndex((prev) =>
|
||||
prev > 0 ? prev - 1 : filteredFilters.length - 1,
|
||||
prev > 0 ? prev - 1 : filteredFilters.length - 1
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
|
@ -2240,7 +2240,7 @@ function ChatPage() {
|
|||
) {
|
||||
e.preventDefault();
|
||||
handleFilterSelect(
|
||||
filteredFilters[selectedFilterIndex],
|
||||
filteredFilters[selectedFilterIndex]
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
|
@ -2259,7 +2259,7 @@ function ChatPage() {
|
|||
) {
|
||||
e.preventDefault();
|
||||
handleFilterSelect(
|
||||
filteredFilters[selectedFilterIndex],
|
||||
filteredFilters[selectedFilterIndex]
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
|
@ -2339,7 +2339,7 @@ function ChatPage() {
|
|||
.filter((filter) =>
|
||||
filter.name
|
||||
.toLowerCase()
|
||||
.includes(filterSearchTerm.toLowerCase()),
|
||||
.includes(filterSearchTerm.toLowerCase())
|
||||
)
|
||||
.map((filter, index) => (
|
||||
<button
|
||||
|
|
@ -2365,7 +2365,7 @@ function ChatPage() {
|
|||
{availableFilters.filter((filter) =>
|
||||
filter.name
|
||||
.toLowerCase()
|
||||
.includes(filterSearchTerm.toLowerCase()),
|
||||
.includes(filterSearchTerm.toLowerCase())
|
||||
).length === 0 &&
|
||||
filterSearchTerm && (
|
||||
<div className="px-2 py-3 text-sm text-muted-foreground">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue