story-kit: done 240_story_btw_side_question_slash_command
Implement /btw side question slash command — lets users ask quick questions from conversation context without disrupting the main chat. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dave
@@ -12,6 +12,7 @@ import type { ChatInputHandle } from "./ChatInput";
|
||||
import { ChatInput } from "./ChatInput";
|
||||
import { LozengeFlyProvider } from "./LozengeFlyContext";
|
||||
import { MessageItem } from "./MessageItem";
|
||||
import { SideQuestionOverlay } from "./SideQuestionOverlay";
|
||||
import { StagePanel } from "./StagePanel";
|
||||
import { WorkItemDetailPanel } from "./WorkItemDetailPanel";
|
||||
|
||||
@@ -197,6 +198,11 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
|
||||
const [queuedMessages, setQueuedMessages] = useState<
|
||||
{ id: string; text: string }[]
|
||||
>([]);
|
||||
const [sideQuestion, setSideQuestion] = useState<{
|
||||
question: string;
|
||||
response: string;
|
||||
loading: boolean;
|
||||
} | null>(null);
|
||||
// Ref so stale WebSocket callbacks can read the current queued messages
|
||||
const queuedMessagesRef = useRef<{ id: string; text: string }[]>([]);
|
||||
const queueIdCounterRef = useRef(0);
|
||||
@@ -360,6 +366,16 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
|
||||
onOnboardingStatus: (onboarding: boolean) => {
|
||||
setNeedsOnboarding(onboarding);
|
||||
},
|
||||
onSideQuestionToken: (content) => {
|
||||
setSideQuestion((prev) =>
|
||||
prev ? { ...prev, response: prev.response + content } : prev,
|
||||
);
|
||||
},
|
||||
onSideQuestionDone: (response) => {
|
||||
setSideQuestion((prev) =>
|
||||
prev ? { ...prev, response, loading: false } : prev,
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
return () => {
|
||||
@@ -459,6 +475,28 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
|
||||
const sendMessage = async (messageText: string) => {
|
||||
if (!messageText.trim()) return;
|
||||
|
||||
// /btw <question> — answered from context without disrupting main chat
|
||||
const btwMatch = messageText.match(/^\/btw\s+(.+)/s);
|
||||
if (btwMatch) {
|
||||
const question = btwMatch[1].trim();
|
||||
setSideQuestion({ question, response: "", loading: true });
|
||||
|
||||
const isClaudeCode = model === "claude-code-pty";
|
||||
const provider = isClaudeCode
|
||||
? "claude-code"
|
||||
: model.startsWith("claude-")
|
||||
? "anthropic"
|
||||
: "ollama";
|
||||
const config: ProviderConfig = {
|
||||
provider,
|
||||
model,
|
||||
base_url: "http://localhost:11434",
|
||||
enable_tools: false,
|
||||
};
|
||||
wsRef.current?.sendSideQuestion(question, messages, config);
|
||||
return;
|
||||
}
|
||||
|
||||
// Agent is busy — queue the message instead of dropping it
|
||||
if (loading) {
|
||||
const newItem = {
|
||||
@@ -1154,6 +1192,15 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sideQuestion && (
|
||||
<SideQuestionOverlay
|
||||
question={sideQuestion.question}
|
||||
response={sideQuestion.response}
|
||||
loading={sideQuestion.loading}
|
||||
onDismiss={() => setSideQuestion(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
159
frontend/src/components/SideQuestionOverlay.tsx
Normal file
159
frontend/src/components/SideQuestionOverlay.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import * as React from "react";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
const { useEffect, useRef } = React;
|
||||
|
||||
interface SideQuestionOverlayProps {
|
||||
question: string;
|
||||
/** Streaming response text. Empty while loading. */
|
||||
response: string;
|
||||
loading: boolean;
|
||||
onDismiss: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismissible overlay that shows a /btw side question and its streamed response.
|
||||
* The question and response are NOT part of the main conversation history.
|
||||
* Dismiss with Escape, Enter, or Space.
|
||||
*/
|
||||
export function SideQuestionOverlay({
|
||||
question,
|
||||
response,
|
||||
loading,
|
||||
onDismiss,
|
||||
}: SideQuestionOverlayProps) {
|
||||
const dismissRef = useRef(onDismiss);
|
||||
dismissRef.current = onDismiss;
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
dismissRef.current();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
// biome-ignore lint/a11y/noStaticElementInteractions: backdrop dismiss is supplementary; keyboard handled via window keydown
|
||||
// biome-ignore lint/a11y/useKeyWithClickEvents: keyboard dismiss handled via window keydown listener
|
||||
<div
|
||||
data-testid="side-question-overlay"
|
||||
onClick={onDismiss}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
background: "rgba(0,0,0,0.55)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
{/* biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation only; no real interaction */}
|
||||
{/* biome-ignore lint/a11y/noStaticElementInteractions: stop-propagation only; no real interaction */}
|
||||
<div
|
||||
data-testid="side-question-panel"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
background: "#2f2f2f",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "12px",
|
||||
padding: "24px",
|
||||
maxWidth: "640px",
|
||||
width: "90vw",
|
||||
maxHeight: "60vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "16px",
|
||||
boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
gap: "12px",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
style={{
|
||||
display: "block",
|
||||
fontSize: "0.7rem",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0.08em",
|
||||
textTransform: "uppercase",
|
||||
color: "#a0d4a0",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
>
|
||||
/btw
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
color: "#ececec",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{question}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDismiss}
|
||||
title="Dismiss (Escape, Enter, or Space)"
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#666",
|
||||
cursor: "pointer",
|
||||
fontSize: "1.1rem",
|
||||
padding: "2px 6px",
|
||||
borderRadius: "4px",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Response area */}
|
||||
<div
|
||||
style={{
|
||||
overflowY: "auto",
|
||||
flex: 1,
|
||||
color: "#ccc",
|
||||
fontSize: "0.95rem",
|
||||
lineHeight: "1.6",
|
||||
}}
|
||||
>
|
||||
{loading && !response && (
|
||||
<span style={{ color: "#666", fontStyle: "italic" }}>
|
||||
Thinking…
|
||||
</span>
|
||||
)}
|
||||
{response && <Markdown>{response}</Markdown>}
|
||||
</div>
|
||||
|
||||
{/* Footer hint */}
|
||||
{!loading && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.75rem",
|
||||
color: "#555",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Press Escape, Enter, or Space to dismiss
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user