62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { type FC } from "react";
|
|
import { ComposerPrimitive, AuiIf } from "@assistant-ui/react";
|
|
import { ArrowUpIcon, SquareIcon } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { TooltipIconButton } from "./tooltip-icon-button";
|
|
|
|
const ComposerAction: FC = () => {
|
|
return (
|
|
<div className="relative flex items-center justify-end">
|
|
<AuiIf condition={(s) => !s.thread.isRunning}>
|
|
<ComposerPrimitive.Send asChild>
|
|
<TooltipIconButton
|
|
tooltip="Odoslať"
|
|
side="bottom"
|
|
type="button"
|
|
variant="default"
|
|
size="icon"
|
|
className="size-8 rounded-full bg-blue-600 hover:bg-blue-700 border-0"
|
|
aria-label="Send message"
|
|
>
|
|
<ArrowUpIcon className="size-4" />
|
|
</TooltipIconButton>
|
|
</ComposerPrimitive.Send>
|
|
</AuiIf>
|
|
<AuiIf condition={(s) => s.thread.isRunning}>
|
|
<ComposerPrimitive.Cancel asChild>
|
|
<Button
|
|
type="button"
|
|
variant="default"
|
|
size="icon"
|
|
className="size-8 rounded-full bg-blue-600 hover:bg-blue-700 border-0"
|
|
aria-label="Stop generating"
|
|
>
|
|
<SquareIcon className="size-3 fill-current" />
|
|
</Button>
|
|
</ComposerPrimitive.Cancel>
|
|
</AuiIf>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ThreadComposer: FC = () => {
|
|
return (
|
|
<ComposerPrimitive.Root className="relative flex w-full flex-col">
|
|
<div
|
|
data-slot="composer-shell"
|
|
className="flex w-full flex-col gap-2 rounded-2xl border border-blue-500/20 bg-card p-3 transition-shadow focus-within:border-blue-500/50 focus-within:ring-2 focus-within:ring-blue-500/10"
|
|
>
|
|
<ComposerPrimitive.Input
|
|
placeholder="Napíšte správu..."
|
|
className="max-h-32 min-h-10 w-full resize-none bg-transparent px-2 py-1 text-sm outline-none placeholder:text-muted-foreground/60"
|
|
rows={1}
|
|
autoFocus
|
|
aria-label="Message input"
|
|
/>
|
|
<ComposerAction />
|
|
</div>
|
|
</ComposerPrimitive.Root>
|
|
);
|
|
}; |