Skip to main content

AI Sidebar 컴포넌트

문서 편집기와 함께 사용되는 AI 채팅 사이드바 컴포넌트입니다.

개요​

AISidebar는 사용자와 AI 간의 대화를 관리하고, 문서 편집 제안을 표시합니다.

Props​

interface AISidebarProps {
  onPromptSubmit: (
    prompt: string,
    selectedContext?: SelectedContext | null,
    links?: string[],
    context?: AIContext,
  ) => void;
  isLoading?: boolean;
  editorRef?: React.RefObject<any>;
  onFinalizeChanges?: () => void;
  onRevertChanges?: () => void;
  hasActiveChanges?: boolean;
  selectedContext?: SelectedContext | null;
  onClearContext?: () => void;
  initialChatHistory?: Message[];
  documentId?: string;
  userId?: string;
  initialGuide?: string;
  initialGlossary?: string;
  referenceMaterials?: ReferenceMaterial[];
  onAddReference?: (material: ReferenceMaterial) => void;
  onRemoveReference?: (id: string) => void;
  streamingMessage?: string;
  thinkingMessage?: string;
  onCancelStreaming?: () => void;
}

사용 예시​

import { AISidebar, AISidebarHandle } from "@/components/AISidebar";

function DocumentEditor() {
  const sidebarRef = useRef<AISidebarHandle>(null);

  const handlePromptSubmit = async (prompt, context) => {
    // AI 요청 처리
    const response = await fetchAIResponse(prompt, context);
    sidebarRef.current?.addAIResponse(response.content);
  };

  return (
    <AISidebar
      ref={sidebarRef}
      onPromptSubmit={handlePromptSubmit}
      documentId={documentId}
      referenceMaterials={references}
    />
  );
}

Ref 메서드​

interface AISidebarHandle {
  addAIResponse: (
    content: string,
    suggestions?: DocumentChanges | null,
    containsPlaceholders?: boolean,
    sources?: SourceReference[],
  ) => void;
  addReferenceMaterial: (material: ReferenceMaterial) => void;
  highlightSource: (
    refId: string,
    quotedText?: string,
    pageNumber?: number,
  ) => void;
  sendPrompt: (prompt: string) => void;
}

메시지 타입​

type Message = {
  role: "user" | "assistant";
  content: string;
  timestamp?: Date;
  suggestions?: DocumentChanges | null;
  attachedFiles?: AttachedFile[];
  links?: string[];
  quotes?: Quote[];
  selectedContext?: SelectedContext;
  sources?: SourceReference[];
  citations?: Citation[];
};

스타일링​

Tailwind CSS 클래스를 사용하여 스타일링되어 있습니다.

주요 클래스:

  • flex h-full w-full flex-col
  • border-l border-gray-200 bg-gray-50