Skip to content

Commit

Permalink
cr
Browse files Browse the repository at this point in the history
  • Loading branch information
@bracesproul
bracesproul committed Oct 17, 2024
1 parent 089f727 commit c93f743
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 67 deletions.
28 changes: 28 additions & 0 deletions frontend/app/components/DocumentCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";

export type Document = {
page_content: string;
metadata: Record<string, any>;
};

export const DocumentCard = ({ document }: { document: Document }) => {
const description =
document.metadata.description && document.metadata.description !== ""
? document.metadata.description
: document.page_content.slice(0, 250);

return (
<Card className="md:w-[200px] sm:w-[200px] w-full h-[110px] bg-inherit border-gray-500 flex flex-col">
<CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
<CardTitle className="text-sm font-light text-gray-300 line-clamp-1 overflow-hidden p-[-24px]">
{document.metadata.title}
</CardTitle>
</CardHeader>
<CardContent className="flex flex-col px-3 flex-grow justify-between">
<p className="text-xs font-light text-gray-400 line-clamp-4 overflow-hidden">
{description}
</p>
</CardContent>
</Card>
);
};
122 changes: 83 additions & 39 deletions frontend/app/components/GeneratingQuestionsToolUI.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,104 @@
import { useAssistantToolUI } from "@assistant-ui/react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { LoaderCircle, Globe } from "lucide-react";
import { LoaderCircle, Globe, Plus } from "lucide-react";
import { DocumentDialog } from "./DocumentDialog";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip";
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
import { TooltipIconButton } from "./ui/assistant-ui/tooltip-icon-button";
import { DocumentCard, Document } from "./DocumentCard";

type Question = {
question: string;
step: number;
// Not rendered in the UI ATM.
queries?: string[];
documents?: Record<string, any>[];
documents?: Document[];
};

const QuestionCard = ({ question }: { question: Question }) => (
<Card className="md:w-[250px] sm:w-[250px] w-full md:max-w-full min-h-[140px] max-h-fit bg-inherit border-gray-500 flex flex-col gap-2">
<CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<CardTitle className="text-sm font-light text-gray-300 line-clamp-4 overflow-hidden">
{question.question}
</CardTitle>
</TooltipTrigger>
<TooltipContent className="max-w-[600px] whitespace-pre-wrap">
<p>{question.question}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</CardHeader>
<CardContent className="flex flex-col flex-grow px-3 pb-2 justify-between">
<div className="flex flex-col gap-1 mt-auto">
<hr className="border-gray-400" />
<div className="flex flex-wrap items-start justify-start gap-2 pt-1">
{question.documents?.length ? (
question.documents?.map((doc: Record<string, any>, idx: number) => (
<DocumentDialog
key={`document-${question.step}-${idx}`}
document={doc}
/>
))
) : (
<span className="flex items-center justify-start gap-2 text-gray-400">
<p className="text-sm">Finding documents</p>
<LoaderCircle className="animate-spin w-4 h-4" />
</span>
)}
const QuestionCard = ({ question }: { question: Question }) => {
const displayedDocuments = question.documents?.slice(0, 6) || [];
const remainingDocuments = question.documents?.slice(6) || [];

return (
<Card className="md:w-[250px] sm:w-[250px] w-full md:max-w-full h-[140px] bg-inherit border-gray-500 flex flex-col gap-2">
<CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<CardTitle className="text-sm font-light text-gray-300 line-clamp-4 overflow-hidden">
{question.question}
</CardTitle>
</TooltipTrigger>
<TooltipContent className="max-w-[600px] whitespace-pre-wrap">
<p>{question.question}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</CardHeader>
<CardContent className="flex flex-col flex-grow px-3 pb-2 justify-between mt-auto">
<div className="flex flex-col gap-1 mt-auto">
<hr className="border-gray-400" />
<div className="flex flex-wrap items-start justify-start gap-2 pt-1">
{question.documents?.length ? (
<>
{displayedDocuments.map((doc: Document, idx: number) => (
<DocumentDialog
key={`document-${question.step}-${idx}`}
document={doc}
/>
))}
{remainingDocuments.length > 0 && (
<Sheet>
<SheetTrigger>
<TooltipIconButton
tooltip={`See ${remainingDocuments.length} more documents`}
variant="outline"
className="w-6 h-6 z-50 transition-colors ease-in-out bg-transparent hover:bg-gray-500 border-gray-400 text-gray-300"
>
<Plus />
</TooltipIconButton>
</SheetTrigger>
<SheetContent
side="right"
className="bg-[#282828] border-none overflow-y-auto flex-grow scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent md:min-w-[50vw] min-w-[70vw]"
>
<div className="flex flex-col gap-4">
<h2 className="text-xl font-semibold text-gray-300">
All Documents for Question
</h2>
<div className="flex flex-wrap gap-2">
{question.documents?.map(
(doc: Document, idx: number) => (
<DocumentDialog
key={`all-documents-${idx}`}
document={doc}
trigger={<DocumentCard document={doc} />}
/>
),
)}
</div>
</div>
</SheetContent>
</Sheet>
)}
</>
) : (
<span className="flex items-center justify-start gap-2 text-gray-400">
<p className="text-sm">Finding documents</p>
<LoaderCircle className="animate-spin w-4 h-4" />
</span>
)}
</div>
</div>
</div>
</CardContent>
</Card>
);
</CardContent>
</Card>
);
};

export const useGeneratingQuestionsUI = () =>
useAssistantToolUI({
Expand Down
29 changes: 1 addition & 28 deletions frontend/app/components/SelectedDocumentsToolUI.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,8 @@
import { useAssistantToolUI } from "@assistant-ui/react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { BookOpenText, Plus } from "lucide-react";
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
import { DocumentDialog } from "./DocumentDialog";

type Document = {
page_content: string;
metadata: Record<string, any>;
};

const DocumentCard = ({ document }: { document: Document }) => {
const description =
document.metadata.description && document.metadata.description !== ""
? document.metadata.description
: document.page_content.slice(0, 250);

return (
<Card className="md:w-[200px] sm:w-[200px] w-full h-[110px] bg-inherit border-gray-500 flex flex-col">
<CardHeader className="flex-shrink-0 px-3 pt-2 pb-0">
<CardTitle className="text-sm font-light text-gray-300 line-clamp-1 overflow-hidden p-[-24px]">
{document.metadata.title}
</CardTitle>
</CardHeader>
<CardContent className="flex flex-col px-3 flex-grow justify-between">
<p className="text-xs font-light text-gray-400 line-clamp-4 overflow-hidden">
{description}
</p>
</CardContent>
</Card>
);
};
import { DocumentCard, Document } from "./DocumentCard";

export const useSelectedDocumentsUI = () =>
useAssistantToolUI({
Expand Down

0 comments on commit c93f743

Please sign in to comment.