spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/chat/conversation-history.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import {18  Accordion,19  AccordionContent,20  AccordionItem,21  AccordionTrigger,22} from "@/components/ui/accordion";23import { StreamingAnswer } from "@/components/streaming-answer";2425interface ConversationMessage {26  question: string;27  answer: string;28}2930interface ConversationHistoryProps {31  history: ConversationMessage[];32}3334export function ConversationHistory({ history }: ConversationHistoryProps) {35  if (history.length === 0) {36    return null;37  }3839  return (40    <div className="w-full max-w-4xl mx-auto mb-8 space-y-3">41      {history.map((message, index) => (42        <Accordion 43          key={index} 44          type="single" 45          collapsible 46          className="w-full"47          data-testid={`accordion-conversation-${index}`}48        >49          <AccordionItem value={`item-${index}`} className="border rounded-lg">50            <AccordionTrigger 51              className="px-4 py-3 hover-elevate no-underline text-left"52              data-testid={`trigger-conversation-${index}`}53            >54              <div className="flex items-start gap-3 w-full pr-4">55                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary">56                  {index + 1}57                </div>58                <div className="flex-1 min-w-0">59                  <p className="text-sm font-medium truncate">60                    {message.question}61                  </p>62                </div>63              </div>64            </AccordionTrigger>65            <AccordionContent className="px-4 pb-4">66              <div className="pl-11">67                <div className="mb-3 text-sm font-medium text-muted-foreground">68                  Question:69                </div>70                <div className="mb-4 p-3 rounded-md bg-muted/50">71                  <p className="text-sm">{message.question}</p>72                </div>73                <div className="mb-3 text-sm font-medium text-muted-foreground">74                  Answer:75                </div>76                <div className="prose prose-sm dark:prose-invert max-w-none">77                  <StreamingAnswer 78                    content={message.answer}79                    isStreaming={false}80                  />81                </div>82              </div>83            </AccordionContent>84          </AccordionItem>85        </Accordion>86      ))}87    </div>88  );89}90