mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-02 19:55:18 +02:00
2690fe1196
- Revised the pricing page title and description to reflect new features including AI workspace, automations, and agents. - Enhanced the FAQ section with detailed information about AI automations and agents, including scheduling and event-triggered workflows. - Updated demo plans to include features related to AI automations and agents, ensuring clarity on capabilities and costs. - Added a new automation illustration to the homepage features grid, emphasizing the automation capabilities of SurfSense.
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { CornerDownLeft, Lightbulb } from "lucide-react";
|
|
import { memo, useCallback } 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 {
|
|
/** Called with the chosen prompt text; the caller prefills the composer. */
|
|
onSelect: (prompt: string) => void;
|
|
}
|
|
|
|
const ExamplePromptButton = memo(function ExamplePromptButton({
|
|
prompt,
|
|
onSelect,
|
|
}: {
|
|
prompt: string;
|
|
onSelect: (prompt: string) => void;
|
|
}) {
|
|
const handleClick = useCallback(() => onSelect(prompt), [prompt, onSelect]);
|
|
|
|
return (
|
|
<Button
|
|
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"
|
|
>
|
|
<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>
|
|
</Button>
|
|
);
|
|
});
|
|
|
|
export function ChatExamplePrompts({ onSelect }: ChatExamplePromptsProps) {
|
|
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>
|
|
{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>
|
|
</div>
|
|
);
|
|
}
|