pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 12:21:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add ChatRow and handle different message types

Browse Source
This commit is contained in:
Saoud Rizwan
2024-07-08 15:37:50 -04:00
parent e713212e8c
commit 2ab7873e9c
4 changed files with 331 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
webview-ui/src/components/ChatView.tsx
View File

@@ -4,12 +4,60 @@ import { KeyboardEvent, useEffect, useRef, useState } from "react"
import DynamicTextArea from "react-textarea-autosize"
import { vscode } from "../utilities/vscode"
import { ClaudeAskResponse } from "@shared/WebviewMessage"
import ChatRow from "./ChatRow"
interface ChatViewProps {
messages: ClaudeMessage[]
}
// maybe instead of storing state in App, just make chatview always show so dont conditionally load/unload? need to make sure messages are persisted (i remember seeing something about how webviews can be frozen in docs)
const ChatView = ({ messages}: ChatViewProps) => {
const ChatView = ({}: ChatViewProps) => {
// dummy data for messages
const generateRandomTimestamp = (baseDate: Date, rangeInDays: number): number => {
const rangeInMs = rangeInDays * 24 * 60 * 60 * 1000 // convert days to milliseconds
const randomOffset = Math.floor(Math.random() * rangeInMs * 2) - rangeInMs // rangeInMs * 2 to have offset in both directions
return baseDate.getTime() + randomOffset
}
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: "ask",
ask: "request_limit_reached",
text: "type: ask, ask: request_limit_reached",
ts: generateRandomTimestamp(baseDate, 1),
},
{ 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: "say",
say: "api_req_started",
text: "type: say, say: api_req_started",
ts: generateRandomTimestamp(baseDate, 1),
},
{
type: "say",
say: "api_req_finished",
text: "type: say, say: api_req_finished",
ts: generateRandomTimestamp(baseDate, 1),
},
{ 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: "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),
},
]
const [inputValue, setInputValue] = useState("")
const messagesEndRef = useRef<HTMLDivElement>(null)
const textAreaRef = useRef<HTMLTextAreaElement>(null)
@@ -20,14 +68,14 @@ const ChatView = ({ messages}: ChatViewProps) => {
const scrollToBottom = () => {
// https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move
messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start' })
messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" })
}
useEffect(() => {
scrollToBottom()
// if last message is an ask, show user ask UI
// if user finished a task, then start a new task with a new conversation history since in this moment that the extension is waiting for user response, the user could close the extension and the conversation history would be lost.
// if user finished a task, then start a new task with a new conversation history since in this moment that the extension is waiting for user response, the user could close the extension and the conversation history would be lost.
// basically as long as a task is active, the conversation history will be persisted
const lastMessage = messages.at(-1)
@@ -42,14 +90,12 @@ const ChatView = ({ messages}: ChatViewProps) => {
}
}, [messages])
const handleSendMessage = () => {
const text = inputValue.trim()
if (text) {
setInputValue("")
if (messages.length === 0) {
vscode.postMessage({ type: "newTask", text })
vscode.postMessage({ type: "newTask", text })
} else if (claudeAsk) {
switch (claudeAsk) {
case "followup":
@@ -81,28 +127,23 @@ const ChatView = ({ messages}: ChatViewProps) => {
if (textAreaRef.current && !textAreaHeight) {
setTextAreaHeight(textAreaRef.current.offsetHeight)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return (
<div style={{ display: "flex", flexDirection: "column", height: "100vh", overflow: "hidden" }}>
<div
style={{
display: "flex",
flexDirection: "column",
height: "100vh",
overflow: "hidden",
backgroundColor: "gray",
}}>
<div style={{ flexGrow: 1, overflowY: "scroll", scrollbarWidth: "none" }}>
{messages.map((message, index) => (
<div
key={index}
style={{
marginBottom: "10px",
padding: "8px",
borderRadius: "4px",
backgroundColor:
message.type === "ask"
? "var(--vscode-editor-background)"
: "var(--vscode-sideBar-background)",
}}>
<span style={{ whiteSpace: "pre-line", overflowWrap: "break-word" }}>{message.text}</span>
</div>
{messages.map((message) => (
<ChatRow message={message} />
))}
<div style={{ float:"left", clear: "both" }} ref={messagesEndRef} />
<div style={{ float: "left", clear: "both" }} ref={messagesEndRef} />
</div>
<div style={{ position: "relative", paddingTop: "16px", paddingBottom: "16px" }}>
<DynamicTextArea