Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | 1x 1x 1x 1x 12x 12x 12x 12x 12x 12x 12x 12x 12x 2x 2x 2x 1x 1x 1x 1x 2x 1x | "use client";
import {
useEffect,
useRef,
useState,
type FormEventHandler,
type KeyboardEvent,
} from "react";
import { Text } from "@/components/ui/text";
import { CHAT_COMPOSER_COPY } from "@/constants/chat";
import { cn } from "@/utils/class-name";
type ChatComposerProps = {
input: string;
canSend: boolean;
isLoading: boolean;
isProviderReady: boolean;
inputTooltip?: string;
helperText?: string;
errorMessage?: string | null;
onInputChange: (value: string) => void;
onSubmitAction: FormEventHandler<HTMLFormElement>;
onStopAction: () => void;
};
export function ChatComposer({
input,
canSend,
isLoading,
isProviderReady,
inputTooltip,
helperText,
errorMessage,
onInputChange,
onSubmitAction,
onStopAction,
}: ChatComposerProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [showTooltip, setShowTooltip] = useState(false);
useEffect(() => {
const textarea = textareaRef.current;
Iif (!textarea) return;
textarea.style.height = "auto";
textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
}, [input]);
const IME_COMPOSING_KEYCODE = 229;
function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
const isComposing =
event.nativeEvent.isComposing ||
event.nativeEvent.keyCode === IME_COMPOSING_KEYCODE;
Iif (isComposing) return;
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
Eif (canSend) event.currentTarget.form?.requestSubmit();
}
}
function handleStopAction(e: React.MouseEvent<HTMLButtonElement>) {
e.preventDefault();
onStopAction();
}
return (
<div className="border-t border-white/8 bg-composer backdrop-blur-[1.75rem] px-4 py-3 sm:px-6 lg:px-8 shadow-[0_-1px_0_rgba(255,255,255,0.04),0_-10px_34px_rgba(0,0,0,0.2)] light:border-slate-200 light:bg-white/80 light:shadow-[0_-1px_0_rgba(0,0,0,0.06),0_-10px_34px_rgba(0,0,0,0.08)]">
<div className="mx-auto w-full max-w-3xl flex flex-col gap-2">
{errorMessage ? (
<div className="rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3">
<Text variant="error">{errorMessage}</Text>
</div>
) : null}
<div
className="relative"
onMouseEnter={() => !isProviderReady && setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onClick={() => !isProviderReady && setShowTooltip(true)}
>
{showTooltip && !isProviderReady && inputTooltip && (
<div className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-slate-800 px-3 py-1.5 font-dm-sans text-xs text-white shadow-lg">
{inputTooltip}
<span className="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-slate-800" />
</div>
)}
<form
onSubmit={onSubmitAction}
className="flex w-full items-center gap-3 rounded-[1.125rem] border border-white/13 bg-composer-input px-4 py-2.5 shadow-[0_8px_26px_rgba(7,12,30,0.2),inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-xl transition-all duration-200 focus-within:border-violet-400/55 light:border-slate-200 light:bg-white light:shadow-[0_8px_26px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.9)] light:focus-within:border-violet-400/70"
>
<textarea
ref={textareaRef}
value={input}
onChange={(event) => onInputChange(event.target.value)}
onKeyDown={handleKeyDown}
placeholder={CHAT_COMPOSER_COPY.placeholder}
aria-label={CHAT_COMPOSER_COPY.ariaLabel}
disabled={!isProviderReady}
rows={1}
className="max-h-[9.375rem] flex-1 resize-none overflow-y-auto border-none bg-transparent font-dm-sans text-sm leading-[1.55] text-white/90 caret-violet-400/90 outline-none placeholder:text-white/46 disabled:cursor-not-allowed disabled:opacity-50 light:text-slate-900 light:placeholder:text-slate-400 light:caret-violet-600"
/>
<button
type="submit"
disabled={!isLoading && !canSend}
aria-label={isLoading ? CHAT_COMPOSER_COPY.stopButtonLabel : CHAT_COMPOSER_COPY.sendButtonLabel}
{...(isLoading && { onClick: handleStopAction })}
className={cn(
"self-end grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200",
"disabled:opacity-30 disabled:cursor-not-allowed",
"hover:scale-[1.04] hover:shadow-brand",
isLoading
? "bg-loading"
: canSend
? "bg-brand-gradient text-white"
: "bg-loading",
)}
>
{isLoading ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
<rect x="6" y="6" width="12" height="12" rx="2" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
<path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
</svg>
)}
</button>
</form>
</div>
<Text variant="helper" className="px-1 text-center text-white/55 light:text-slate-500">
{helperText ?? CHAT_COMPOSER_COPY.defaultHelperText}
</Text>
</div>
</div>
);
}
|