323 lines
7.9 KiB
TypeScript
323 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useId, useState } from "react";
|
|
|
|
interface SessionContext {
|
|
summary: string;
|
|
last_updated: string | null;
|
|
}
|
|
|
|
interface ContextPanelProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
sessionContext: SessionContext | null;
|
|
initialContext?: string;
|
|
onInitialContextChange?: (value: string) => void;
|
|
isLocked?: boolean;
|
|
}
|
|
|
|
function formatRelativeTime(isoString: string): string {
|
|
const date = new Date(isoString);
|
|
const now = new Date();
|
|
const diffMs = now.getTime() - date.getTime();
|
|
const diffSec = Math.floor(diffMs / 1000);
|
|
const diffMin = Math.floor(diffSec / 60);
|
|
const diffHour = Math.floor(diffMin / 60);
|
|
|
|
if (diffSec < 60) {
|
|
return "just now";
|
|
}
|
|
if (diffMin < 60) {
|
|
return `${diffMin} minute${diffMin === 1 ? "" : "s"} ago`;
|
|
}
|
|
if (diffHour < 24) {
|
|
return `${diffHour} hour${diffHour === 1 ? "" : "s"} ago`;
|
|
}
|
|
return date.toLocaleDateString();
|
|
}
|
|
|
|
function BrainIcon() {
|
|
return (
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
|
|
<path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
|
|
<path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
|
|
<path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
|
|
<path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
|
|
<path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
|
|
<path d="M19.938 10.5a4 4 0 0 1 .585.396" />
|
|
<path d="M6 18a4 4 0 0 1-1.967-.516" />
|
|
<path d="M19.967 17.484A4 4 0 0 1 18 18" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function ContextPanel({
|
|
isOpen,
|
|
onClose,
|
|
sessionContext,
|
|
initialContext = "",
|
|
onInitialContextChange,
|
|
isLocked = false,
|
|
}: ContextPanelProps) {
|
|
const titleId = useId();
|
|
const [localValue, setLocalValue] = useState(initialContext);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setLocalValue(initialContext);
|
|
}
|
|
}, [isOpen, initialContext]);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
onClose();
|
|
}
|
|
},
|
|
[onClose],
|
|
);
|
|
|
|
const handleSave = useCallback(() => {
|
|
onInitialContextChange?.(localValue);
|
|
onClose();
|
|
}, [localValue, onInitialContextChange, onClose]);
|
|
|
|
if (!isOpen) {
|
|
return null;
|
|
}
|
|
|
|
const hasSessionContext = sessionContext?.summary?.trim();
|
|
// Show edit mode when: not locked AND no session context yet
|
|
const isEditMode = !isLocked && !hasSessionContext;
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
.context-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
.context-modal {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
max-height: 80vh;
|
|
overflow: auto;
|
|
position: relative;
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
.context-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.context-modal-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
|
color: #3b82f6;
|
|
}
|
|
.context-modal-title {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
.context-modal-description {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 0.875rem;
|
|
color: #64748b;
|
|
line-height: 1.5;
|
|
}
|
|
.context-content {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: #334155;
|
|
white-space: pre-wrap;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
.context-textarea {
|
|
width: 100%;
|
|
min-height: 200px;
|
|
padding: 1rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: #334155;
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
.context-textarea:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.context-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
}
|
|
.context-empty-icon {
|
|
margin-bottom: 0.75rem;
|
|
opacity: 0.5;
|
|
}
|
|
.context-empty-text {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
}
|
|
.context-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
.context-timestamp {
|
|
font-size: 0.75rem;
|
|
color: #94a3b8;
|
|
}
|
|
.context-btn {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.context-btn-close {
|
|
background: white;
|
|
color: #475569;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.context-btn-close:hover {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
}
|
|
.context-btn-save {
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: 1px solid #3b82f6;
|
|
margin-left: 0.5rem;
|
|
}
|
|
.context-btn-save:hover {
|
|
background: #2563eb;
|
|
border-color: #2563eb;
|
|
}
|
|
.context-footer-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
`}</style>
|
|
<div
|
|
className="context-modal-overlay"
|
|
onClick={onClose}
|
|
onKeyDown={handleKeyDown}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby={titleId}
|
|
>
|
|
{/* biome-ignore lint/a11y/noStaticElementInteractions: modal content wrapper */}
|
|
<div
|
|
className="context-modal"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="context-modal-header">
|
|
<div className="context-modal-icon">
|
|
<BrainIcon />
|
|
</div>
|
|
<h2 id={titleId} className="context-modal-title">
|
|
{isEditMode ? "Initial Context" : "Session Context"}
|
|
</h2>
|
|
</div>
|
|
<p className="context-modal-description">
|
|
{isEditMode
|
|
? "Set background context to guide the conversation. This will be locked after you send your first message."
|
|
: "This is what the assistant has learned from your conversation so far. It uses this context to provide more relevant answers."}
|
|
</p>
|
|
{isEditMode ? (
|
|
<textarea
|
|
className="context-textarea"
|
|
placeholder="Enter any background context or instructions for the assistant..."
|
|
value={localValue}
|
|
onChange={(e) => setLocalValue(e.target.value)}
|
|
/>
|
|
) : hasSessionContext ? (
|
|
<div className="context-content">{sessionContext.summary}</div>
|
|
) : (
|
|
<div className="context-empty">
|
|
<div className="context-empty-icon">
|
|
<BrainIcon />
|
|
</div>
|
|
<div className="context-empty-text">
|
|
No context yet. Ask some questions to build context.
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="context-footer">
|
|
<span className="context-timestamp">
|
|
{sessionContext?.last_updated
|
|
? `Last updated: ${formatRelativeTime(sessionContext.last_updated)}`
|
|
: ""}
|
|
</span>
|
|
<div className="context-footer-buttons">
|
|
<button
|
|
type="button"
|
|
className="context-btn context-btn-close"
|
|
onClick={onClose}
|
|
>
|
|
{isEditMode ? "Cancel" : "Close"}
|
|
</button>
|
|
{isEditMode && (
|
|
<button
|
|
type="button"
|
|
className="context-btn context-btn-save"
|
|
onClick={handleSave}
|
|
>
|
|
Save
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|