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 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | 1x 13x 13x 13x 13x 13x 13x 13x 13x 5x 5x 5x 1x 1x 13x 4x 4x 3x | "use client";
import {
useEffect,
useRef,
useState,
type FormEventHandler,
type KeyboardEvent,
} from "react";
// Components
import { Text } from "@/components/ui/text";
// Constants
import { CHAT_COMPOSER_COPY } from "@/constants/chat";
import { FORM_FIELD_PANEL_CLASSES } from "@/constants/theme";
// Utils
import { cn } from "@/utils/class-name";
export type ChatComposerProps = {
input: string;
canSend: boolean;
isLoading: boolean;
isProviderReady: boolean;
inputTooltip?: string;
helperText?: string;
errorMessage?: string | null;
onInputChange: (value: string) => void;
onSubmitAction: FormEventHandler<HTMLFormElement>;
};
export function ChatComposer({
input,
canSend,
isLoading,
isProviderReady,
inputTooltip,
helperText,
errorMessage,
onInputChange,
onSubmitAction,
}: 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();
}
}
return (
<div
className={cn(
"border-t border-white/8 backdrop-blur-shell shadow-composer-bar bg-glass-composer light:border-app-border-8 light:backdrop-blur-none",
"px-4 py-3 sm:px-6 lg:px-8",
)}
>
<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 light:border-red-300/50 light:bg-red-50">
<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={cn(
"pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs shadow-lg",
"bg-slate-800 text-white",
"light:border light:border-app-border-10 light:bg-app-fg light:text-white light:shadow-card-surface",
)}
>
{inputTooltip}
<span
className={cn(
"absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-slate-800",
"light:border-t-app-fg",
)}
/>
</div>
)}
<form
onSubmit={onSubmitAction}
className={cn(
"flex w-full items-center gap-3 rounded-composer-field px-4 py-2.5 shadow-composer-input backdrop-blur-xl bg-glass-input transition-all duration-200",
"focus-within:border-violet-400/55 light:shadow-composer-field light:focus-within:border-app-hover-border",
FORM_FIELD_PANEL_CLASSES,
)}
>
<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-composer-textarea flex-1 resize-none overflow-y-auto border-none bg-transparent text-sm leading-composer text-white/90 caret-violet-400/90 outline-none placeholder:text-white/46 disabled:cursor-not-allowed disabled:opacity-50 light:text-app-fg light:caret-amber-700 light:placeholder:text-app-muted-50"
/>
<button
type="submit"
disabled={!canSend}
aria-label={CHAT_COMPOSER_COPY.sendButtonLabel}
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-hover-btn hover:shadow-btn-brand",
canSend
? "bg-btn-active text-white light:hover:brightness-105"
: "bg-btn-disabled text-white/75 light:bg-app-btn-brand-disabled light:text-white/85",
)}
>
{isLoading ? (
<span className="h-2 w-2 animate-pulse rounded-full bg-current" />
) : (
<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">
{helperText ?? CHAT_COMPOSER_COPY.defaultHelperText}
</Text>
</div>
</div>
);
}
|