Add combineCommandSequences and combineApiRequests to group certain message types

This commit is contained in:
Saoud Rizwan
2024-07-08 17:09:56 -04:00
parent 2ab7873e9c
commit a0a533d72e
4 changed files with 181 additions and 29 deletions

View File

@@ -1,10 +1,12 @@
import { ClaudeAsk, ClaudeMessage, ExtensionMessage } from "@shared/ExtensionMessage"
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
import { KeyboardEvent, useEffect, useRef, useState } from "react"
import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"
import DynamicTextArea from "react-textarea-autosize"
import { vscode } from "../utilities/vscode"
import { ClaudeAskResponse } from "@shared/WebviewMessage"
import ChatRow from "./ChatRow"
import { combineCommandSequences } from "../utilities/combineCommandSequences"
import { combineApiRequests } from "../utilities/combineApiRequests"
interface ChatViewProps {
messages: ClaudeMessage[]
@@ -21,43 +23,68 @@ const ChatView = ({}: ChatViewProps) => {
const baseDate = new Date("2024-07-08T00:00:00Z")
const messages: ClaudeMessage[] = [
{ type: "say", say: "task", text: "type: say, say: task", ts: generateRandomTimestamp(baseDate, 1) },
{ type: "say", say: "task", text: "Starting task", ts: generateRandomTimestamp(baseDate, 1) },
{
type: "ask",
ask: "request_limit_reached",
text: "type: ask, ask: request_limit_reached",
ts: generateRandomTimestamp(baseDate, 1),
text: "Request limit reached",
ts: generateRandomTimestamp(baseDate, 2),
},
{ type: "ask", ask: "followup", text: "type: ask, ask: followup", ts: generateRandomTimestamp(baseDate, 1) },
{ type: "ask", ask: "command", text: "type: ask, ask: command", ts: generateRandomTimestamp(baseDate, 1) },
{ type: "say", say: "error", text: "type: say, say: error", ts: generateRandomTimestamp(baseDate, 1) },
{ type: "ask", ask: "followup", text: "Any additional questions?", ts: generateRandomTimestamp(baseDate, 3) },
{ type: "say", say: "error", text: "An error occurred", ts: generateRandomTimestamp(baseDate, 4) },
{ type: "say", say: "text", text: "Some general text", ts: generateRandomTimestamp(baseDate, 7) },
{ type: "say", say: "tool", text: "Using a tool", ts: generateRandomTimestamp(baseDate, 8) },
// First command sequence
{ type: "ask", ask: "command", text: "ls -l", ts: generateRandomTimestamp(baseDate, 9) },
{ type: "say", say: "command_output", text: "file1.txt", ts: generateRandomTimestamp(baseDate, 10) },
{ type: "say", say: "api_req_started", text: JSON.stringify({ request: "GET /api/data" }), ts: generateRandomTimestamp(baseDate, 5) },
{ type: "say", say: "command_output", text: "file2.txt", ts: generateRandomTimestamp(baseDate, 11) },
{ type: "say", say: "command_output", text: "directory1", ts: generateRandomTimestamp(baseDate, 12) },
{ type: "say", say: "text", text: "Interrupting text", ts: generateRandomTimestamp(baseDate, 13) },
{ type: "say", say: "api_req_finished", text: JSON.stringify({ cost: "GET /api/data" }), ts: generateRandomTimestamp(baseDate, 6) },
// Second command sequence
{ type: "ask", ask: "command", text: "pwd", ts: generateRandomTimestamp(baseDate, 14) },
{ type: "say", say: "command_output", text: "/home/user", ts: generateRandomTimestamp(baseDate, 15) },
{ type: "ask", ask: "completion_result", text: "Task completed", ts: generateRandomTimestamp(baseDate, 16) },
// Third command sequence (no output)
{ type: "ask", ask: "command", text: "echo Hello", ts: generateRandomTimestamp(baseDate, 17) },
// Testing combineApiRequests
{ type: "say", say: "text", text: "Final message", ts: generateRandomTimestamp(baseDate, 18) },
{ type: "ask", ask: "command", text: "ls -l", ts: generateRandomTimestamp(baseDate, 19) },
{ type: "say", say: "command_output", text: "file1.txt", ts: generateRandomTimestamp(baseDate, 20) },
{
type: "say",
say: "api_req_started",
text: "type: say, say: api_req_started",
ts: generateRandomTimestamp(baseDate, 1),
text: JSON.stringify({ request: "GET /api/data" }),
ts: generateRandomTimestamp(baseDate, 23),
},
{ type: "say", say: "command_output", text: "file2.txt", ts: generateRandomTimestamp(baseDate, 24) },
{ type: "say", say: "text", text: "Some random text", ts: generateRandomTimestamp(baseDate, 25) },
{
type: "say",
say: "api_req_finished",
text: "type: say, say: api_req_finished",
ts: generateRandomTimestamp(baseDate, 1),
text: JSON.stringify({ cost: 0.005 }),
ts: generateRandomTimestamp(baseDate, 26),
},
{ type: "say", say: "text", text: "type: say, say: text", ts: generateRandomTimestamp(baseDate, 1) },
{ type: "say", say: "tool", text: "type: say, say: tool", ts: generateRandomTimestamp(baseDate, 1) },
{ type: "ask", ask: "command", text: "pwd", ts: generateRandomTimestamp(baseDate, 27) },
{ type: "say", say: "command_output", text: "/home/user", ts: generateRandomTimestamp(baseDate, 28) },
{
type: "say",
say: "command_output",
text: "type: say, say: command_output",
ts: generateRandomTimestamp(baseDate, 1),
},
{
type: "ask",
ask: "completion_result",
text: "type: ask, ask: completion_result",
ts: generateRandomTimestamp(baseDate, 1),
say: "api_req_started",
text: JSON.stringify({ request: "POST /api/update" }),
ts: generateRandomTimestamp(baseDate, 29),
},
{ type: "say", say: "text", text: "Final message", ts: generateRandomTimestamp(baseDate, 30) },
]
const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages)), [messages])
const [inputValue, setInputValue] = useState("")
const messagesEndRef = useRef<HTMLDivElement>(null)
const textAreaRef = useRef<HTMLTextAreaElement>(null)
@@ -140,7 +167,7 @@ const ChatView = ({}: ChatViewProps) => {
backgroundColor: "gray",
}}>
<div style={{ flexGrow: 1, overflowY: "scroll", scrollbarWidth: "none" }}>
{messages.map((message) => (
{modifiedMessages.map((message) => (
<ChatRow message={message} />
))}
<div style={{ float: "left", clear: "both" }} ref={messagesEndRef} />