mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-26 17:26:23 +02:00
485 lines
16 KiB
TypeScript
485 lines
16 KiB
TypeScript
import {
|
|
ActionBarPrimitive,
|
|
AssistantIf,
|
|
BranchPickerPrimitive,
|
|
ComposerPrimitive,
|
|
ErrorPrimitive,
|
|
MessagePrimitive,
|
|
ThreadPrimitive,
|
|
useAssistantState,
|
|
} from "@assistant-ui/react";
|
|
import {
|
|
ArrowDownIcon,
|
|
ArrowUpIcon,
|
|
CheckIcon,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
CopyIcon,
|
|
DownloadIcon,
|
|
Loader2,
|
|
PencilIcon,
|
|
RefreshCwIcon,
|
|
SquareIcon,
|
|
} from "lucide-react";
|
|
import { useParams } from "next/navigation";
|
|
import type { FC } from "react";
|
|
import { useRef, useState } from "react";
|
|
import {
|
|
ComposerAddAttachment,
|
|
ComposerAttachments,
|
|
UserMessageAttachments,
|
|
} from "@/components/assistant-ui/attachment";
|
|
import { MarkdownText } from "@/components/assistant-ui/markdown-text";
|
|
import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
|
|
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
|
import { DocumentsDataTable } from "@/components/new-chat/DocumentsDataTable";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { Document } from "@/contracts/types/document.types";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export const Thread: FC = () => {
|
|
return (
|
|
<ThreadPrimitive.Root
|
|
className="aui-root aui-thread-root @container flex h-full flex-col bg-background"
|
|
style={{
|
|
["--thread-max-width" as string]: "44rem",
|
|
}}
|
|
>
|
|
<ThreadPrimitive.Viewport
|
|
turnAnchor="top"
|
|
className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4"
|
|
>
|
|
<AssistantIf condition={({ thread }) => thread.isEmpty}>
|
|
<ThreadWelcome />
|
|
</AssistantIf>
|
|
|
|
<ThreadPrimitive.Messages
|
|
components={{
|
|
UserMessage,
|
|
EditComposer,
|
|
AssistantMessage,
|
|
}}
|
|
/>
|
|
|
|
<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
|
|
<ThreadScrollToBottom />
|
|
<Composer />
|
|
</ThreadPrimitive.ViewportFooter>
|
|
</ThreadPrimitive.Viewport>
|
|
</ThreadPrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const ThreadScrollToBottom: FC = () => {
|
|
return (
|
|
<ThreadPrimitive.ScrollToBottom asChild>
|
|
<TooltipIconButton
|
|
tooltip="Scroll to bottom"
|
|
variant="outline"
|
|
className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
|
|
>
|
|
<ArrowDownIcon />
|
|
</TooltipIconButton>
|
|
</ThreadPrimitive.ScrollToBottom>
|
|
);
|
|
};
|
|
|
|
const ThreadWelcome: FC = () => {
|
|
return (
|
|
<div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col">
|
|
<div className="aui-thread-welcome-center flex w-full grow flex-col items-center justify-center">
|
|
<div className="aui-thread-welcome-message flex size-full flex-col justify-center px-4">
|
|
<h1 className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in font-semibold text-2xl duration-200">
|
|
Hello there!
|
|
</h1>
|
|
<p className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in text-muted-foreground text-xl delay-75 duration-200">
|
|
How can I help you today?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<ThreadSuggestions />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const SUGGESTIONS = [
|
|
{
|
|
title: "What's the weather",
|
|
label: "in San Francisco?",
|
|
prompt: "What's the weather in San Francisco?",
|
|
},
|
|
{
|
|
title: "Explain React hooks",
|
|
label: "like useState and useEffect",
|
|
prompt: "Explain React hooks like useState and useEffect",
|
|
},
|
|
] as const;
|
|
|
|
const ThreadSuggestions: FC = () => {
|
|
return (
|
|
<div className="aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4">
|
|
{SUGGESTIONS.map((suggestion, index) => (
|
|
<div
|
|
key={suggestion.prompt}
|
|
className="aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200"
|
|
style={{ animationDelay: `${100 + index * 50}ms` }}
|
|
>
|
|
<ThreadPrimitive.Suggestion prompt={suggestion.prompt} autoSend asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-left text-sm transition-colors hover:bg-muted"
|
|
aria-label={suggestion.prompt}
|
|
>
|
|
<span className="aui-thread-welcome-suggestion-text-1 font-medium">
|
|
{suggestion.title}
|
|
</span>
|
|
<span className="aui-thread-welcome-suggestion-text-2 text-muted-foreground">
|
|
{suggestion.label}
|
|
</span>
|
|
</Button>
|
|
</ThreadPrimitive.Suggestion>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Composer: FC = () => {
|
|
// ---- State for document mentions ----
|
|
const [allSelectedDocuments, setAllSelectedDocuments] = useState<Document[]>([]);
|
|
const [mentionedDocuments, setMentionedDocuments] = useState<Document[]>([]);
|
|
const [showDocumentPopover, setShowDocumentPopover] = useState(false);
|
|
const [inputValue, setInputValue] = useState("");
|
|
const inputRef = useRef<HTMLTextAreaElement | null>(null);
|
|
const { search_space_id } = useParams();
|
|
|
|
const handleInputOrKeyUp = (
|
|
e: React.FormEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>
|
|
) => {
|
|
const textarea = e.currentTarget;
|
|
const value = textarea.value;
|
|
setInputValue(value);
|
|
|
|
// Regex: finds all [title] occurrences
|
|
const mentionRegex = /\[([^\]]+)\]/g;
|
|
const titlesMentioned: string[] = [];
|
|
let match;
|
|
while ((match = mentionRegex.exec(value)) !== null) {
|
|
titlesMentioned.push(match[1]);
|
|
}
|
|
|
|
// Use allSelectedDocuments to filter down for current chips
|
|
setMentionedDocuments(
|
|
allSelectedDocuments.filter((doc) => titlesMentioned.includes(doc.title))
|
|
);
|
|
|
|
const selectionStart = textarea.selectionStart;
|
|
// Only open if the last character before the caret is exactly '@'
|
|
if (
|
|
selectionStart !== null &&
|
|
value[selectionStart - 1] === "@" &&
|
|
value.length === selectionStart
|
|
) {
|
|
setShowDocumentPopover(true);
|
|
} else {
|
|
setShowDocumentPopover(false);
|
|
}
|
|
};
|
|
|
|
const handleDocumentsMention = (documents: Document[]) => {
|
|
// Add newly selected docs to allSelectedDocuments
|
|
setAllSelectedDocuments((prev) => {
|
|
const toAdd = documents.filter((doc) => !prev.find((p) => p.id === doc.id));
|
|
return [...prev, ...toAdd];
|
|
});
|
|
let newValue = inputValue;
|
|
documents.forEach((doc) => {
|
|
const refString = `[${doc.title}]`;
|
|
if (!newValue.includes(refString)) {
|
|
if (newValue.trim() !== "" && !newValue.endsWith(" ")) {
|
|
newValue += " ";
|
|
}
|
|
newValue += refString;
|
|
}
|
|
});
|
|
setInputValue(newValue);
|
|
// Run the chip update as well right after change
|
|
const mentionRegex = /\[([^\]]+)\]/g;
|
|
const titlesMentioned: string[] = [];
|
|
let match;
|
|
while ((match = mentionRegex.exec(newValue)) !== null) {
|
|
titlesMentioned.push(match[1]);
|
|
}
|
|
setMentionedDocuments(
|
|
allSelectedDocuments.filter((doc) => titlesMentioned.includes(doc.title))
|
|
);
|
|
};
|
|
|
|
return (
|
|
<ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
|
|
<ComposerPrimitive.AttachmentDropzone className="aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50">
|
|
<ComposerAttachments />
|
|
{/* -------- Input field w/ refs and handlers -------- */}
|
|
<ComposerPrimitive.Input
|
|
ref={inputRef}
|
|
value={inputValue}
|
|
onInput={handleInputOrKeyUp}
|
|
onKeyUp={handleInputOrKeyUp}
|
|
placeholder="Send a message..."
|
|
className="aui-composer-input mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0"
|
|
rows={1}
|
|
autoFocus
|
|
aria-label="Message input"
|
|
/>
|
|
|
|
{/* -------- Document mention popover (simple version) -------- */}
|
|
{showDocumentPopover && (
|
|
<div
|
|
style={{ position: "absolute", bottom: "8rem", left: 0, zIndex: 50 }}
|
|
className="shadow-lg rounded-md border bg-popover"
|
|
>
|
|
<div className="p-2 max-h-96 w-full overflow-auto">
|
|
<DocumentsDataTable
|
|
searchSpaceId={Number(search_space_id)}
|
|
onSelectionChange={handleDocumentsMention}
|
|
onDone={() => setShowDocumentPopover(false)}
|
|
initialSelectedDocuments={mentionedDocuments}
|
|
viewOnly={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* ---- Mention chips for selected/mentioned documents ---- */}
|
|
{mentionedDocuments.length > 0 && (
|
|
<div className="aui-composer-mentioned-docs mx-2 flex flex-wrap gap-2">
|
|
{mentionedDocuments.map((doc) => (
|
|
<span
|
|
key={doc.id}
|
|
className="px-2 py-1 rounded bg-accent text-xs font-semibold max-w-xs truncate"
|
|
title={doc.title}
|
|
>
|
|
{doc.title}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
<ComposerAction />
|
|
</ComposerPrimitive.AttachmentDropzone>
|
|
</ComposerPrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const ComposerAction: FC = () => {
|
|
// Check if any attachments are still being processed (running AND progress < 100)
|
|
// When progress is 100, processing is done but waiting for send()
|
|
const hasProcessingAttachments = useAssistantState(({ composer }) =>
|
|
composer.attachments?.some((att) => {
|
|
const status = att.status;
|
|
if (status?.type !== "running") return false;
|
|
const progress = (status as { type: "running"; progress?: number }).progress;
|
|
return progress === undefined || progress < 100;
|
|
})
|
|
);
|
|
|
|
return (
|
|
<div className="aui-composer-action-wrapper relative mx-2 mb-2 flex items-center justify-between">
|
|
<ComposerAddAttachment />
|
|
|
|
{/* Show processing indicator when attachments are being processed */}
|
|
{hasProcessingAttachments && (
|
|
<div className="flex items-center gap-1.5 text-muted-foreground text-xs">
|
|
<Loader2 className="size-3 animate-spin" />
|
|
<span>Processing...</span>
|
|
</div>
|
|
)}
|
|
|
|
<AssistantIf condition={({ thread }) => !thread.isRunning}>
|
|
<ComposerPrimitive.Send asChild disabled={hasProcessingAttachments}>
|
|
<TooltipIconButton
|
|
tooltip={hasProcessingAttachments ? "Wait for attachments to process" : "Send message"}
|
|
side="bottom"
|
|
type="submit"
|
|
variant="default"
|
|
size="icon"
|
|
className={cn(
|
|
"aui-composer-send size-8 rounded-full",
|
|
hasProcessingAttachments && "cursor-not-allowed opacity-50"
|
|
)}
|
|
aria-label="Send message"
|
|
disabled={hasProcessingAttachments}
|
|
>
|
|
<ArrowUpIcon className="aui-composer-send-icon size-4" />
|
|
</TooltipIconButton>
|
|
</ComposerPrimitive.Send>
|
|
</AssistantIf>
|
|
|
|
<AssistantIf condition={({ thread }) => thread.isRunning}>
|
|
<ComposerPrimitive.Cancel asChild>
|
|
<Button
|
|
type="button"
|
|
variant="default"
|
|
size="icon"
|
|
className="aui-composer-cancel size-8 rounded-full"
|
|
aria-label="Stop generating"
|
|
>
|
|
<SquareIcon className="aui-composer-cancel-icon size-3 fill-current" />
|
|
</Button>
|
|
</ComposerPrimitive.Cancel>
|
|
</AssistantIf>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const MessageError: FC = () => {
|
|
return (
|
|
<MessagePrimitive.Error>
|
|
<ErrorPrimitive.Root className="aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200">
|
|
<ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
|
|
</ErrorPrimitive.Root>
|
|
</MessagePrimitive.Error>
|
|
);
|
|
};
|
|
|
|
const AssistantMessage: FC = () => {
|
|
return (
|
|
<MessagePrimitive.Root
|
|
className="aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
|
|
data-role="assistant"
|
|
>
|
|
<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
|
|
<MessagePrimitive.Parts
|
|
components={{
|
|
Text: MarkdownText,
|
|
tools: { Fallback: ToolFallback },
|
|
}}
|
|
/>
|
|
<MessageError />
|
|
</div>
|
|
|
|
<div className="aui-assistant-message-footer mt-1 ml-2 flex">
|
|
<BranchPicker />
|
|
<AssistantActionBar />
|
|
</div>
|
|
</MessagePrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const AssistantActionBar: FC = () => {
|
|
return (
|
|
<ActionBarPrimitive.Root
|
|
hideWhenRunning
|
|
autohide="not-last"
|
|
autohideFloat="single-branch"
|
|
className="aui-assistant-action-bar-root -ml-1 col-start-3 row-start-2 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm"
|
|
>
|
|
<ActionBarPrimitive.Copy asChild>
|
|
<TooltipIconButton tooltip="Copy">
|
|
<AssistantIf condition={({ message }) => message.isCopied}>
|
|
<CheckIcon />
|
|
</AssistantIf>
|
|
<AssistantIf condition={({ message }) => !message.isCopied}>
|
|
<CopyIcon />
|
|
</AssistantIf>
|
|
</TooltipIconButton>
|
|
</ActionBarPrimitive.Copy>
|
|
<ActionBarPrimitive.ExportMarkdown asChild>
|
|
<TooltipIconButton tooltip="Export as Markdown">
|
|
<DownloadIcon />
|
|
</TooltipIconButton>
|
|
</ActionBarPrimitive.ExportMarkdown>
|
|
<ActionBarPrimitive.Reload asChild>
|
|
<TooltipIconButton tooltip="Refresh">
|
|
<RefreshCwIcon />
|
|
</TooltipIconButton>
|
|
</ActionBarPrimitive.Reload>
|
|
</ActionBarPrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const UserMessage: FC = () => {
|
|
return (
|
|
<MessagePrimitive.Root
|
|
className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
|
|
data-role="user"
|
|
>
|
|
<UserMessageAttachments />
|
|
|
|
<div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
|
|
<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
|
|
<MessagePrimitive.Parts />
|
|
</div>
|
|
<div className="aui-user-action-bar-wrapper -translate-x-full -translate-y-1/2 absolute top-1/2 left-0 pr-2">
|
|
<UserActionBar />
|
|
</div>
|
|
</div>
|
|
|
|
<BranchPicker className="aui-user-branch-picker -mr-1 col-span-full col-start-1 row-start-3 justify-end" />
|
|
</MessagePrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const UserActionBar: FC = () => {
|
|
return (
|
|
<ActionBarPrimitive.Root
|
|
hideWhenRunning
|
|
autohide="not-last"
|
|
className="aui-user-action-bar-root flex flex-col items-end"
|
|
>
|
|
<ActionBarPrimitive.Edit asChild>
|
|
<TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
|
|
<PencilIcon />
|
|
</TooltipIconButton>
|
|
</ActionBarPrimitive.Edit>
|
|
</ActionBarPrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const EditComposer: FC = () => {
|
|
return (
|
|
<MessagePrimitive.Root className="aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3">
|
|
<ComposerPrimitive.Root className="aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted">
|
|
<ComposerPrimitive.Input
|
|
className="aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none"
|
|
autoFocus
|
|
/>
|
|
<div className="aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end">
|
|
<ComposerPrimitive.Cancel asChild>
|
|
<Button variant="ghost" size="sm">
|
|
Cancel
|
|
</Button>
|
|
</ComposerPrimitive.Cancel>
|
|
<ComposerPrimitive.Send asChild>
|
|
<Button size="sm">Update</Button>
|
|
</ComposerPrimitive.Send>
|
|
</div>
|
|
</ComposerPrimitive.Root>
|
|
</MessagePrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({ className, ...rest }) => {
|
|
return (
|
|
<BranchPickerPrimitive.Root
|
|
hideWhenSingleBranch
|
|
className={cn(
|
|
"aui-branch-picker-root -ml-2 mr-2 inline-flex items-center text-muted-foreground text-xs",
|
|
className
|
|
)}
|
|
{...rest}
|
|
>
|
|
<BranchPickerPrimitive.Previous asChild>
|
|
<TooltipIconButton tooltip="Previous">
|
|
<ChevronLeftIcon />
|
|
</TooltipIconButton>
|
|
</BranchPickerPrimitive.Previous>
|
|
<span className="aui-branch-picker-state font-medium">
|
|
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
|
|
</span>
|
|
<BranchPickerPrimitive.Next asChild>
|
|
<TooltipIconButton tooltip="Next">
|
|
<ChevronRightIcon />
|
|
</TooltipIconButton>
|
|
</BranchPickerPrimitive.Next>
|
|
</BranchPickerPrimitive.Root>
|
|
);
|
|
};
|