mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-06 20:15:17 +02:00
feat(chat): enhance ChatViewport with conditional footer rendering and update ChatExamplePrompts for improved category selection
This commit is contained in:
Anish Sarkar
parent
e15df9d949
commit
5fce4e1621
3 changed files with 87 additions and 53 deletions
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { ThreadPrimitive } from "@assistant-ui/react";
|
||||
import { AuiIf, ThreadPrimitive } from "@assistant-ui/react";
|
||||
import { ArrowDownIcon } from "lucide-react";
|
||||
import type { FC, ReactNode } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -40,15 +40,17 @@ export const ChatViewport: FC<ChatViewportProps> = ({ children, footer }) => (
|
|||
/>
|
||||
{children}
|
||||
{footer ? (
|
||||
<ThreadPrimitive.ViewportFooter
|
||||
className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-main-panel from-60% to-transparent px-4 pt-6"
|
||||
style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
|
||||
>
|
||||
<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
|
||||
<ChatScrollToBottom />
|
||||
{footer}
|
||||
</div>
|
||||
</ThreadPrimitive.ViewportFooter>
|
||||
<AuiIf condition={({ thread }) => !thread.isEmpty}>
|
||||
<ThreadPrimitive.ViewportFooter
|
||||
className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-main-panel from-60% to-transparent px-4 pt-6"
|
||||
style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
|
||||
>
|
||||
<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
|
||||
<ChatScrollToBottom />
|
||||
{footer}
|
||||
</div>
|
||||
</ThreadPrimitive.ViewportFooter>
|
||||
</AuiIf>
|
||||
) : null}
|
||||
</ThreadPrimitive.Viewport>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
"use client";
|
||||
|
||||
import { CornerDownLeft, Lightbulb } from "lucide-react";
|
||||
import { memo, useCallback } from "react";
|
||||
import {
|
||||
FilePlus2,
|
||||
Search,
|
||||
Settings2,
|
||||
type LucideIcon,
|
||||
WandSparkles,
|
||||
Workflow,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { memo, useCallback, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { CHAT_EXAMPLE_CATEGORIES } from "@/lib/chat/example-prompts";
|
||||
|
||||
interface ChatExamplePromptsProps {
|
||||
|
|
@ -12,6 +19,13 @@ interface ChatExamplePromptsProps {
|
|||
onSelect: (prompt: string) => void;
|
||||
}
|
||||
|
||||
const CATEGORY_ICONS: Record<string, LucideIcon> = {
|
||||
search: Search,
|
||||
create: FilePlus2,
|
||||
automate: Workflow,
|
||||
tools: Settings2,
|
||||
};
|
||||
|
||||
const ExamplePromptButton = memo(function ExamplePromptButton({
|
||||
prompt,
|
||||
onSelect,
|
||||
|
|
@ -26,50 +40,72 @@ const ExamplePromptButton = memo(function ExamplePromptButton({
|
|||
type="button"
|
||||
variant="ghost"
|
||||
onClick={handleClick}
|
||||
className="h-auto w-full items-start justify-start gap-2.5 whitespace-normal rounded-md border bg-background px-3 py-2 text-left font-normal text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
className="h-auto w-full items-start justify-start whitespace-normal rounded-lg bg-transparent px-2.5 py-1.5 text-left font-normal text-muted-foreground shadow-none hover:bg-foreground/10 hover:text-foreground sm:rounded-xl sm:px-3 sm:py-2"
|
||||
>
|
||||
<CornerDownLeft
|
||||
aria-hidden="true"
|
||||
className="mt-0.5 size-3.5 shrink-0 text-muted-foreground/70"
|
||||
/>
|
||||
<span className="min-w-0 text-pretty text-sm">{prompt}</span>
|
||||
<span className="min-w-0 text-pretty text-xs sm:text-sm">{prompt}</span>
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
|
||||
export function ChatExamplePrompts({ onSelect }: ChatExamplePromptsProps) {
|
||||
const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null);
|
||||
const activeCategory = CHAT_EXAMPLE_CATEGORIES.find(
|
||||
(category) => category.id === activeCategoryId
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mt-3 w-full select-none rounded-xl border border-dashed bg-muted/30 p-3 sm:p-4">
|
||||
<div className="mb-2 flex items-center gap-2 px-1">
|
||||
<Lightbulb aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
Not sure where to start? Try one of these
|
||||
</p>
|
||||
</div>
|
||||
<Tabs defaultValue={CHAT_EXAMPLE_CATEGORIES[0].id} className="w-full">
|
||||
<div className="overflow-x-auto pb-1">
|
||||
<TabsList className="h-9 w-max">
|
||||
{CHAT_EXAMPLE_CATEGORIES.map((category) => (
|
||||
<TabsTrigger key={category.id} value={category.id} className="text-xs">
|
||||
{category.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
<div className="mt-2 w-full select-none sm:mt-3">
|
||||
{activeCategory ? null : (
|
||||
<div className="pb-1">
|
||||
<div className="mx-auto flex max-w-full flex-wrap items-center justify-center gap-1.5 px-0.5 sm:gap-2">
|
||||
{CHAT_EXAMPLE_CATEGORIES.map((category) => {
|
||||
const Icon = CATEGORY_ICONS[category.id] ?? WandSparkles;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={category.id}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setActiveCategoryId(category.id)}
|
||||
className="h-8 rounded-lg bg-muted px-3 text-xs font-medium text-muted-foreground shadow-sm shadow-black/5 hover:bg-foreground/10 hover:text-foreground dark:shadow-black/10 sm:h-10 sm:rounded-xl sm:px-4 sm:text-sm"
|
||||
>
|
||||
<Icon aria-hidden="true" className="size-3.5 sm:size-4" />
|
||||
{category.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{CHAT_EXAMPLE_CATEGORIES.map((category) => (
|
||||
<TabsContent key={category.id} value={category.id} className="mt-3">
|
||||
<ScrollArea className="max-h-48">
|
||||
<ul className="flex flex-col gap-2 pr-2">
|
||||
{category.prompts.map((prompt) => (
|
||||
<li key={prompt}>
|
||||
<ExamplePromptButton prompt={prompt} onSelect={onSelect} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
)}
|
||||
|
||||
{activeCategory ? (
|
||||
<div className="overflow-hidden rounded-lg border border-input bg-muted shadow-sm shadow-black/5 dark:shadow-black/10 sm:rounded-xl">
|
||||
<div className="flex items-center justify-between gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
|
||||
<div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground sm:text-sm">
|
||||
<span className="truncate">{activeCategory.label}</span>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setActiveCategoryId(null)}
|
||||
aria-label="Close example prompts"
|
||||
className="size-7 shrink-0 rounded-full text-muted-foreground hover:bg-foreground/10 hover:text-foreground sm:size-8"
|
||||
>
|
||||
<X aria-hidden="true" className="size-3.5 sm:size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="max-h-52 sm:max-h-64">
|
||||
<ul className="divide-y px-2 pb-2 sm:px-3 sm:pb-3">
|
||||
{activeCategory.prompts.map((prompt) => (
|
||||
<li key={prompt} className="py-0.5 sm:py-1">
|
||||
<ExamplePromptButton prompt={prompt} onSelect={onSelect} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue