90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { type FC } from "react";
|
|
|
|
const SUGGESTIONS = [
|
|
{
|
|
icon: "🔍",
|
|
title: "Aké právne dáta",
|
|
description: "môže agent nájsť?",
|
|
prompt: "Aké právne dáta môžeš vyhľadať?",
|
|
},
|
|
{
|
|
icon: "🚫",
|
|
title: "Čo agent nesmie",
|
|
description: "robiť alebo používať?",
|
|
prompt: "Čo nie si oprávnený robiť alebo použiť?",
|
|
},
|
|
{
|
|
icon: "🤖",
|
|
title: "Detaily AI modelu",
|
|
description: "aký model používaš?",
|
|
prompt: "Aké sú detaily tvojho AI modelu?",
|
|
},
|
|
{
|
|
icon: "📊",
|
|
title: "Zdroje dát",
|
|
description: "odkiaľ čerpáš informácie?",
|
|
prompt: "Aké dátové zdroje agent využíva?",
|
|
},
|
|
];
|
|
|
|
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">
|
|
{SUGGESTIONS.map((s) => (
|
|
<button
|
|
key={s.title}
|
|
onClick={() => handleClick(s.prompt)}
|
|
className="flex flex-col items-start 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"
|
|
>
|
|
<span className="font-medium text-foreground">
|
|
{s.icon} {s.title}
|
|
</span>
|
|
<span className="text-muted-foreground text-xs">{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-center gap-6">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="size-24 rounded-full overflow-hidden ring-2 ring-blue-500/30 shadow-lg shadow-blue-500/20">
|
|
<img
|
|
src="/logo.png"
|
|
alt="Legal AI"
|
|
className="size-full object-cover"
|
|
onError={(e) => {
|
|
e.currentTarget.style.display = "none";
|
|
e.currentTarget.parentElement!.innerHTML = `<div class="size-full bg-blue-600/20 flex items-center justify-center text-4xl">⚖️</div>`;
|
|
}}
|
|
/>
|
|
</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>
|
|
);
|
|
}; |