862 lines
20 KiB
TypeScript
862 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { Markdown } from "@copilotkit/react-ui";
|
|
import { useState } from "react";
|
|
|
|
interface SourceRef {
|
|
chunk_id: string;
|
|
document_uri: string;
|
|
document_title: string;
|
|
chunk_position: number;
|
|
}
|
|
|
|
interface ResearchState {
|
|
question: string;
|
|
phase: string;
|
|
status: string;
|
|
plan: Array<{
|
|
id: number;
|
|
question: string;
|
|
status: string;
|
|
search_results?: {
|
|
type: string;
|
|
results: Array<{
|
|
chunk: string;
|
|
chunk_id: string;
|
|
document_uri: string;
|
|
document_title: string;
|
|
chunk_position: number;
|
|
full_chunk_content: string;
|
|
score: number;
|
|
expanded: boolean;
|
|
}>;
|
|
};
|
|
}>;
|
|
current_question_index: number;
|
|
insights: Array<{
|
|
summary: string;
|
|
confidence: number;
|
|
source_refs: SourceRef[];
|
|
}>;
|
|
document_registry: Record<
|
|
string,
|
|
{
|
|
title: string;
|
|
chunks_referenced: string[];
|
|
}
|
|
>;
|
|
current_document: {
|
|
uri: string;
|
|
title: string;
|
|
content: string;
|
|
total_chunks: number;
|
|
metadata?: Record<string, unknown>;
|
|
} | null;
|
|
confidence: number;
|
|
final_report: {
|
|
title: string;
|
|
summary: string;
|
|
findings: string[];
|
|
conclusions: string[];
|
|
sources: string[];
|
|
citations: Array<{
|
|
document_uri: string;
|
|
document_title: string;
|
|
chunk_ids: string[];
|
|
}>;
|
|
} | null;
|
|
}
|
|
|
|
interface StateDisplayProps {
|
|
state: ResearchState;
|
|
}
|
|
|
|
export default function StateDisplay({ state }: StateDisplayProps) {
|
|
const [expandedSections, setExpandedSections] = useState<
|
|
Record<string, boolean>
|
|
>({
|
|
plan: true,
|
|
insights: true,
|
|
report: true,
|
|
document: true,
|
|
});
|
|
|
|
const [expandedQuestions, setExpandedQuestions] = useState<
|
|
Record<number, boolean>
|
|
>({});
|
|
|
|
const toggleSection = (section: string) => {
|
|
setExpandedSections((prev) => ({
|
|
...prev,
|
|
[section]: !prev[section],
|
|
}));
|
|
};
|
|
|
|
const toggleQuestion = (questionId: number) => {
|
|
setExpandedQuestions((prev) => ({
|
|
...prev,
|
|
[questionId]: !prev[questionId],
|
|
}));
|
|
};
|
|
|
|
// Calculate research progress
|
|
const completedQuestions = state.plan.filter(
|
|
(q) => q.status === "done",
|
|
).length;
|
|
const totalQuestions = state.plan.length;
|
|
const researchProgress =
|
|
totalQuestions > 0 ? (completedQuestions / totalQuestions) * 100 : 0;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
}}
|
|
>
|
|
{/* Current Phase & Status */}
|
|
<div
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "8px",
|
|
padding: "1.5rem",
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#718096",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
Current Phase
|
|
</div>
|
|
<div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
|
|
<div
|
|
style={{
|
|
padding: "0.5rem 1rem",
|
|
background:
|
|
state.phase === "idle"
|
|
? "#e2e8f0"
|
|
: state.phase === "planning"
|
|
? "#fef3c7"
|
|
: state.phase === "searching"
|
|
? "#dbeafe"
|
|
: state.phase === "analyzing"
|
|
? "#e0e7ff"
|
|
: state.phase === "evaluating"
|
|
? "#fce7f3"
|
|
: "#d1fae5",
|
|
color:
|
|
state.phase === "idle"
|
|
? "#718096"
|
|
: state.phase === "planning"
|
|
? "#92400e"
|
|
: state.phase === "searching"
|
|
? "#1e40af"
|
|
: state.phase === "analyzing"
|
|
? "#3730a3"
|
|
: state.phase === "evaluating"
|
|
? "#9f1239"
|
|
: "#065f46",
|
|
borderRadius: "6px",
|
|
fontSize: "1rem",
|
|
fontWeight: "700",
|
|
textTransform: "capitalize",
|
|
}}
|
|
>
|
|
{state.phase}
|
|
</div>
|
|
{state.status && (
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#4a5568",
|
|
}}
|
|
>
|
|
{state.status}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* Research Progress Bar */}
|
|
{totalQuestions > 0 && state.phase !== "idle" && (
|
|
<div style={{ marginTop: "1rem" }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#718096",
|
|
}}
|
|
>
|
|
Research Progress
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
fontWeight: "600",
|
|
color: "#2d3748",
|
|
}}
|
|
>
|
|
{completedQuestions}/{totalQuestions} questions
|
|
</span>
|
|
</div>
|
|
<div
|
|
style={{
|
|
height: "0.5rem",
|
|
background: "#e2e8f0",
|
|
borderRadius: "4px",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: `${researchProgress}%`,
|
|
height: "100%",
|
|
background: "#48bb78",
|
|
transition: "width 0.3s ease",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Question */}
|
|
{state.question && (
|
|
<div
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "8px",
|
|
padding: "1.5rem",
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#718096",
|
|
marginBottom: "0.25rem",
|
|
}}
|
|
>
|
|
Question
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "1.125rem",
|
|
fontWeight: "bold",
|
|
color: "#2d3748",
|
|
}}
|
|
>
|
|
{state.question}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Confidence Meter */}
|
|
{state.confidence > 0 && (
|
|
<div
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "8px",
|
|
padding: "1.5rem",
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#718096",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
Confidence
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
height: "1rem",
|
|
background: "#e2e8f0",
|
|
borderRadius: "4px",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: `${state.confidence * 100}%`,
|
|
height: "100%",
|
|
background:
|
|
state.confidence > 0.8
|
|
? "#48bb78"
|
|
: state.confidence > 0.5
|
|
? "#ed8936"
|
|
: "#f56565",
|
|
transition: "width 0.3s ease",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "1.5rem",
|
|
fontWeight: "bold",
|
|
color:
|
|
state.confidence > 0.8
|
|
? "#48bb78"
|
|
: state.confidence > 0.5
|
|
? "#ed8936"
|
|
: "#f56565",
|
|
}}
|
|
>
|
|
{(state.confidence * 100).toFixed(0)}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Research Plan */}
|
|
{state.plan.length > 0 && (
|
|
<div
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleSection("plan")}
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: "0.75rem",
|
|
background: "#edf2f7",
|
|
border: "1px solid #e2e8f0",
|
|
borderRadius: "4px",
|
|
cursor: "pointer",
|
|
fontSize: "1rem",
|
|
fontWeight: "600",
|
|
color: "#2d3748",
|
|
}}
|
|
>
|
|
<span>Research Plan ({state.plan.length} questions)</span>
|
|
<span>{expandedSections.plan ? "▼" : "▶"}</span>
|
|
</button>
|
|
{expandedSections.plan && (
|
|
<div
|
|
style={{
|
|
padding: "1rem",
|
|
background: "#f7fafc",
|
|
border: "1px solid #e2e8f0",
|
|
borderTop: "none",
|
|
borderRadius: "0 0 4px 4px",
|
|
}}
|
|
>
|
|
{state.plan.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
style={{
|
|
marginBottom: "0.5rem",
|
|
background: "white",
|
|
borderRadius: "4px",
|
|
border: "1px solid #e2e8f0",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleQuestion(item.id)}
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
gap: "0.75rem",
|
|
padding: "0.75rem",
|
|
background: "white",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
textAlign: "left",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "1.25rem",
|
|
color:
|
|
item.status === "done"
|
|
? "#48bb78"
|
|
: item.status === "searching" ||
|
|
item.status === "searched"
|
|
? "#4299e1"
|
|
: "#a0aec0",
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{item.status === "done"
|
|
? "✓"
|
|
: item.status === "searching"
|
|
? "🔍"
|
|
: item.status === "searched"
|
|
? "📊"
|
|
: "⏳"}
|
|
</div>
|
|
<div style={{ flex: 1 }}>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#4a5568",
|
|
}}
|
|
>
|
|
<Markdown content={item.question} />
|
|
</div>
|
|
{item.search_results && (
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#718096",
|
|
marginTop: "0.25rem",
|
|
}}
|
|
>
|
|
{item.search_results.results.length} results
|
|
</div>
|
|
)}
|
|
</div>
|
|
{item.search_results && (
|
|
<span
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#718096",
|
|
}}
|
|
>
|
|
{expandedQuestions[item.id] ? "▼" : "▶"}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Search Results nested inside question */}
|
|
{expandedQuestions[item.id] && item.search_results && (
|
|
<div
|
|
style={{
|
|
padding: "1rem",
|
|
background: "#f7fafc",
|
|
borderTop: "1px solid #e2e8f0",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#718096",
|
|
marginBottom: "0.5rem",
|
|
fontWeight: "600",
|
|
}}
|
|
>
|
|
Search Type: {item.search_results.type}
|
|
</div>
|
|
{item.search_results.results.map((result, idx) => (
|
|
<div
|
|
key={`${result.chunk_id}-${idx}`}
|
|
style={{
|
|
padding: "0.75rem",
|
|
background: "white",
|
|
borderRadius: "4px",
|
|
marginBottom: "0.5rem",
|
|
border: "1px solid #e2e8f0",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: "600",
|
|
color: "#2d3748",
|
|
}}
|
|
>
|
|
{result.document_title}
|
|
</span>
|
|
<div style={{ display: "flex", gap: "0.5rem" }}>
|
|
{result.expanded && (
|
|
<span
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
padding: "0.125rem 0.5rem",
|
|
background: "#bee3f8",
|
|
color: "#2c5282",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
Expanded
|
|
</span>
|
|
)}
|
|
<span
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: "bold",
|
|
color:
|
|
result.score > 0.8
|
|
? "#48bb78"
|
|
: result.score > 0.6
|
|
? "#ed8936"
|
|
: "#a0aec0",
|
|
}}
|
|
>
|
|
{result.score.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#718096",
|
|
lineHeight: "1.4",
|
|
}}
|
|
>
|
|
<Markdown content={`${result.chunk}...`} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Insights */}
|
|
{state.insights.length > 0 && (
|
|
<div
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleSection("insights")}
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: "0.75rem",
|
|
background: "#edf2f7",
|
|
border: "1px solid #e2e8f0",
|
|
borderRadius: "4px",
|
|
cursor: "pointer",
|
|
fontSize: "1rem",
|
|
fontWeight: "600",
|
|
color: "#2d3748",
|
|
}}
|
|
>
|
|
<span>Key Insights ({state.insights.length})</span>
|
|
<span>{expandedSections.insights ? "▼" : "▶"}</span>
|
|
</button>
|
|
{expandedSections.insights && (
|
|
<div
|
|
style={{
|
|
padding: "1rem",
|
|
background: "#f7fafc",
|
|
border: "1px solid #e2e8f0",
|
|
borderTop: "none",
|
|
borderRadius: "0 0 4px 4px",
|
|
}}
|
|
>
|
|
{state.insights.map((insight, idx) => (
|
|
<div
|
|
key={`${insight.summary.substring(0, 30)}-${idx}`}
|
|
style={{
|
|
padding: "0.75rem",
|
|
background: "white",
|
|
borderRadius: "4px",
|
|
marginBottom: "0.5rem",
|
|
border: "1px solid #e2e8f0",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
padding: "0.125rem 0.5rem",
|
|
background: "#c6f6d5",
|
|
color: "#22543d",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
{(insight.confidence * 100).toFixed(0)}% confidence
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#718096",
|
|
}}
|
|
>
|
|
{insight.source_refs?.length || 0} sources
|
|
</span>
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#2d3748",
|
|
lineHeight: "1.5",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
<Markdown content={insight.summary} />
|
|
</div>
|
|
{insight.source_refs && insight.source_refs.length > 0 && (
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#718096",
|
|
marginTop: "0.5rem",
|
|
}}
|
|
>
|
|
<span style={{ fontWeight: "600" }}>Sources: </span>
|
|
{insight.source_refs.map((ref, refIdx) => (
|
|
<span key={ref.chunk_id}>
|
|
{refIdx > 0 && ", "}
|
|
<span style={{ fontSize: "0.75rem" }}>
|
|
{ref.document_title}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Final Report */}
|
|
{state.final_report && (
|
|
<div
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleSection("report")}
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: "0.75rem",
|
|
background: "#edf2f7",
|
|
border: "1px solid #e2e8f0",
|
|
borderRadius: "4px",
|
|
cursor: "pointer",
|
|
fontSize: "1rem",
|
|
fontWeight: "600",
|
|
color: "#2d3748",
|
|
}}
|
|
>
|
|
<span>Final Report</span>
|
|
<span>{expandedSections.report ? "▼" : "▶"}</span>
|
|
</button>
|
|
{expandedSections.report && (
|
|
<div
|
|
style={{
|
|
padding: "1.5rem",
|
|
background: "white",
|
|
border: "1px solid #e2e8f0",
|
|
borderTop: "none",
|
|
borderRadius: "0 0 4px 4px",
|
|
}}
|
|
>
|
|
<h3
|
|
style={{
|
|
fontSize: "1.25rem",
|
|
fontWeight: "600",
|
|
marginBottom: "1rem",
|
|
color: "#2d3748",
|
|
}}
|
|
>
|
|
{state.final_report.title}
|
|
</h3>
|
|
<div style={{ marginBottom: "1.5rem" }}>
|
|
<h4
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: "600",
|
|
color: "#718096",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
Executive Summary
|
|
</h4>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "#4a5568",
|
|
lineHeight: "1.6",
|
|
}}
|
|
>
|
|
<Markdown content={state.final_report.summary} />
|
|
</div>
|
|
</div>
|
|
<div style={{ marginBottom: "1.5rem" }}>
|
|
<h4
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: "600",
|
|
color: "#718096",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
Main Findings
|
|
</h4>
|
|
<ul
|
|
style={{
|
|
paddingLeft: "1.5rem",
|
|
fontSize: "0.875rem",
|
|
color: "#4a5568",
|
|
lineHeight: "1.6",
|
|
}}
|
|
>
|
|
{state.final_report.findings.map((finding, idx) => (
|
|
<li
|
|
key={`finding-${idx}-${finding.substring(0, 30)}`}
|
|
style={{ marginBottom: "0.5rem" }}
|
|
>
|
|
<Markdown content={finding} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div style={{ marginBottom: "1.5rem" }}>
|
|
<h4
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: "600",
|
|
color: "#718096",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
Conclusions
|
|
</h4>
|
|
<ul
|
|
style={{
|
|
paddingLeft: "1.5rem",
|
|
fontSize: "0.875rem",
|
|
color: "#4a5568",
|
|
lineHeight: "1.6",
|
|
}}
|
|
>
|
|
{state.final_report.conclusions.map((conclusion, idx) => (
|
|
<li
|
|
key={`conclusion-${idx}-${conclusion.substring(0, 30)}`}
|
|
style={{ marginBottom: "0.5rem" }}
|
|
>
|
|
<Markdown content={conclusion} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: "600",
|
|
color: "#718096",
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
Citations
|
|
</h4>
|
|
{state.final_report.citations &&
|
|
state.final_report.citations.length > 0 ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "0.5rem",
|
|
}}
|
|
>
|
|
{state.final_report.citations.map((citation) => (
|
|
<div
|
|
key={citation.document_uri}
|
|
style={{
|
|
padding: "0.5rem",
|
|
background: "#f7fafc",
|
|
borderRadius: "4px",
|
|
border: "1px solid #e2e8f0",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: "600",
|
|
color: "#2d3748",
|
|
marginBottom: "0.25rem",
|
|
}}
|
|
>
|
|
{citation.document_title}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#718096",
|
|
}}
|
|
>
|
|
{citation.chunk_ids.length} chunk
|
|
{citation.chunk_ids.length !== 1 ? "s" : ""}{" "}
|
|
referenced
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#718096",
|
|
lineHeight: "1.4",
|
|
}}
|
|
>
|
|
{state.final_report.sources?.map((source) => (
|
|
<div key={source} style={{ marginBottom: "0.25rem" }}>
|
|
{source}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|