84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { type FC } from "react";
|
|
|
|
const STARTERS = [
|
|
{
|
|
icon: "/icons/magnifying-glass.svg",
|
|
description: "What legal data can the agent find?",
|
|
},
|
|
{
|
|
icon: "/icons/ban.svg",
|
|
description: "What are the agent's limitations?",
|
|
},
|
|
{
|
|
icon: "/icons/hexagon.svg",
|
|
description: "What are the details of your AI model?",
|
|
},
|
|
{
|
|
icon: "/icons/database.svg",
|
|
description: "What are your data sources?",
|
|
},
|
|
];
|
|
|
|
const ThreadSuggestions: FC = () => {
|
|
const handleClick = (prompt: string) => {
|
|
const input = document.querySelector(
|
|
'textarea[aria-label="Message input"]'
|
|
) as HTMLTextAreaElement;
|
|
if (input) {
|
|
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
|
window.HTMLTextAreaElement.prototype,
|
|
"value"
|
|
)?.set;
|
|
nativeInputValueSetter?.call(input, prompt);
|
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
input.focus();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="grid w-full grid-cols-2 @lg:grid-cols-4 gap-2 pb-4 px-2">
|
|
{STARTERS.map((s) => (
|
|
<button
|
|
key={s.description}
|
|
onClick={() => handleClick(s.description)}
|
|
className="flex flex-row items-center gap-1 rounded-xl border border-blue-500/20 bg-card px-4 py-3 text-left text-sm transition-colors hover:bg-blue-600/10 hover:border-blue-500/40 cursor-pointer"
|
|
>
|
|
<div className="size-5 flex-shrink-0">
|
|
<img
|
|
src={s.icon}
|
|
alt=""
|
|
className="size-full object-contain group-hover:scale-110 transition-transform"
|
|
/>
|
|
</div>
|
|
<span className="text-muted-foreground group-hover:text-foreground transition-colors leading-tight">
|
|
{s.description}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ThreadWelcome: FC = () => {
|
|
return (
|
|
<div className="mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col items-center justify-end gap-6">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className=" rounded-full overflow-hidden ring-2 ring-blue-500/30 shadow-lg shadow-blue-500/20">
|
|
<img
|
|
src="/logo.png"
|
|
alt="Legal AI"
|
|
className="w-50 h-50 object-cover"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-1 text-center">
|
|
<h1 className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200">
|
|
Legal AI Assistant
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<ThreadSuggestions />
|
|
</div>
|
|
);
|
|
}; |