story-kit: merge 215_bug_cancel_button_still_discards_queued_messages_197_regression
This commit is contained in:
Dave
@@ -1,6 +1,10 @@
|
||||
import * as React from "react";
|
||||
|
||||
const { useEffect, useRef, useState } = React;
|
||||
const { forwardRef, useEffect, useImperativeHandle, useRef, useState } = React;
|
||||
|
||||
export interface ChatInputHandle {
|
||||
appendToInput(text: string): void;
|
||||
}
|
||||
|
||||
interface ChatInputProps {
|
||||
loading: boolean;
|
||||
@@ -10,182 +14,187 @@ interface ChatInputProps {
|
||||
onRemoveQueuedMessage: (id: string) => void;
|
||||
}
|
||||
|
||||
export function ChatInput({
|
||||
loading,
|
||||
queuedMessages,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
onRemoveQueuedMessage,
|
||||
}: ChatInputProps) {
|
||||
const [input, setInput] = useState("");
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
|
||||
function ChatInput(
|
||||
{ loading, queuedMessages, onSubmit, onCancel, onRemoveQueuedMessage },
|
||||
ref,
|
||||
) {
|
||||
const [input, setInput] = useState("");
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, []);
|
||||
useImperativeHandle(ref, () => ({
|
||||
appendToInput(text: string) {
|
||||
setInput((prev) => (prev ? `${prev}\n${text}` : text));
|
||||
},
|
||||
}));
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!input.trim()) return;
|
||||
onSubmit(input);
|
||||
setInput("");
|
||||
};
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "24px",
|
||||
background: "#171717",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
const handleSubmit = () => {
|
||||
if (!input.trim()) return;
|
||||
onSubmit(input);
|
||||
setInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "768px",
|
||||
width: "100%",
|
||||
padding: "24px",
|
||||
background: "#171717",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{/* Queued message indicators */}
|
||||
{queuedMessages.map(({ id, text }) => (
|
||||
<div
|
||||
key={id}
|
||||
data-testid="queued-message-indicator"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
padding: "8px 12px",
|
||||
background: "#1e1e1e",
|
||||
border: "1px solid #3a3a3a",
|
||||
borderRadius: "12px",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "#666",
|
||||
flexShrink: 0,
|
||||
fontSize: "0.7rem",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0.05em",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
Queued
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "#888",
|
||||
flex: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
title="Edit queued message"
|
||||
onClick={() => {
|
||||
setInput(text);
|
||||
onRemoveQueuedMessage(id);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
cursor: "pointer",
|
||||
padding: "2px 6px",
|
||||
fontSize: "0.8rem",
|
||||
flexShrink: 0,
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title="Cancel queued message"
|
||||
onClick={() => onRemoveQueuedMessage(id)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
cursor: "pointer",
|
||||
padding: "2px 4px",
|
||||
fontSize: "0.875rem",
|
||||
flexShrink: 0,
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{/* Input row */}
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "768px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
}}
|
||||
placeholder="Send a message..."
|
||||
rows={1}
|
||||
{/* Queued message indicators */}
|
||||
{queuedMessages.map(({ id, text }) => (
|
||||
<div
|
||||
key={id}
|
||||
data-testid="queued-message-indicator"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
padding: "8px 12px",
|
||||
background: "#1e1e1e",
|
||||
border: "1px solid #3a3a3a",
|
||||
borderRadius: "12px",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "#666",
|
||||
flexShrink: 0,
|
||||
fontSize: "0.7rem",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0.05em",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
Queued
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "#888",
|
||||
flex: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
title="Edit queued message"
|
||||
onClick={() => {
|
||||
setInput(text);
|
||||
onRemoveQueuedMessage(id);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
cursor: "pointer",
|
||||
padding: "2px 6px",
|
||||
fontSize: "0.8rem",
|
||||
flexShrink: 0,
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title="Cancel queued message"
|
||||
onClick={() => onRemoveQueuedMessage(id)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
cursor: "pointer",
|
||||
padding: "2px 4px",
|
||||
fontSize: "0.875rem",
|
||||
flexShrink: 0,
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{/* Input row */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "14px 20px",
|
||||
borderRadius: "24px",
|
||||
border: "1px solid #333",
|
||||
outline: "none",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "500",
|
||||
background: "#2f2f2f",
|
||||
color: "#ececec",
|
||||
boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
|
||||
resize: "none",
|
||||
overflowY: "auto",
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={loading && !input.trim() ? onCancel : handleSubmit}
|
||||
disabled={!loading && !input.trim()}
|
||||
style={{
|
||||
background: "#ececec",
|
||||
color: "black",
|
||||
border: "none",
|
||||
borderRadius: "50%",
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
opacity: !loading && !input.trim() ? 0.5 : 1,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{loading && !input.trim() ? "■" : "↑"}
|
||||
</button>
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
}}
|
||||
placeholder="Send a message..."
|
||||
rows={1}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "14px 20px",
|
||||
borderRadius: "24px",
|
||||
border: "1px solid #333",
|
||||
outline: "none",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "500",
|
||||
background: "#2f2f2f",
|
||||
color: "#ececec",
|
||||
boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
|
||||
resize: "none",
|
||||
overflowY: "auto",
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={loading && !input.trim() ? onCancel : handleSubmit}
|
||||
disabled={!loading && !input.trim()}
|
||||
style={{
|
||||
background: "#ececec",
|
||||
color: "black",
|
||||
border: "none",
|
||||
borderRadius: "50%",
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
opacity: !loading && !input.trim() ? 0.5 : 1,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{loading && !input.trim() ? "■" : "↑"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user