1import React, { useState } from "react";
2import { Message, LLMContent } from "../types";
3
4interface SystemPromptViewProps {
5 message: Message;
6}
7
8function SystemPromptView({ message }: SystemPromptViewProps) {
9 const [isExpanded, setIsExpanded] = useState(false);
10
11 // Extract system prompt text from llm_data
12 let systemPromptText = "";
13 if (message.llm_data) {
14 try {
15 const llmData =
16 typeof message.llm_data === "string" ? JSON.parse(message.llm_data) : message.llm_data;
17 if (llmData && llmData.Content && Array.isArray(llmData.Content)) {
18 const textContent = llmData.Content.find((c: LLMContent) => c.Type === 2 && c.Text);
19 if (textContent) {
20 systemPromptText = textContent.Text;
21 }
22 }
23 } catch (err) {
24 console.error("Failed to parse system prompt:", err);
25 }
26 }
27
28 if (!systemPromptText) {
29 return null;
30 }
31
32 // Count lines and approximate size
33 const lineCount = systemPromptText.split("\n").length;
34 const charCount = systemPromptText.length;
35 const sizeKb = (charCount / 1024).toFixed(1);
36
37 return (
38 <div className="system-prompt-view">
39 <div className="system-prompt-header" onClick={() => setIsExpanded(!isExpanded)}>
40 <div className="system-prompt-summary">
41 <span className="system-prompt-icon">📋</span>
42 <span className="system-prompt-label">System Prompt</span>
43 <span className="system-prompt-meta">
44 {lineCount} lines, {sizeKb} KB
45 </span>
46 </div>
47 <button
48 className="tool-toggle"
49 aria-label={isExpanded ? "Collapse" : "Expand"}
50 aria-expanded={isExpanded}
51 >
52 <svg
53 width="12"
54 height="12"
55 viewBox="0 0 12 12"
56 fill="none"
57 xmlns="http://www.w3.org/2000/svg"
58 style={{
59 transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
60 transition: "transform 0.2s",
61 }}
62 >
63 <path
64 d="M4.5 3L7.5 6L4.5 9"
65 stroke="currentColor"
66 strokeWidth="1.5"
67 strokeLinecap="round"
68 strokeLinejoin="round"
69 />
70 </svg>
71 </button>
72 </div>
73
74 {isExpanded && (
75 <div className="system-prompt-content">
76 <pre className="system-prompt-text">{systemPromptText}</pre>
77 </div>
78 )}
79 </div>
80 );
81}
82
83export default SystemPromptView;