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 tool message types; show tool specific information in webview; separate command from output; add abort button to task card

Browse Source
This commit is contained in:
Saoud Rizwan
2024-07-09 15:05:29 -04:00
parent 771c612d8a
commit d63aef015a
7 changed files with 191 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
webview-ui/src/components/TaskHeader.tsx
View File

@@ -1,32 +1,45 @@
import React, { useState } from "react"
import TextTruncate from "react-text-truncate"
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
interface TaskHeaderProps {
taskText: string
tokensIn: number
tokensOut: number
totalCost: number
onClose: () => void
}
const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut, totalCost }) => {
const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut, totalCost, onClose }) => {
const [isExpanded, setIsExpanded] = useState(false)
const toggleExpand = () => setIsExpanded(!isExpanded)
return (
<div
style={{
padding: "15px 15px 10px 15px",
}}>
<div style={{ padding: "15px 15px 10px 15px" }}>
<div
style={{
backgroundColor: "var(--vscode-badge-background)",
color: "var(--vscode-badge-foreground)",
borderRadius: "3px",
padding: "8px",
padding: "12px",
display: "flex",
flexDirection: "column",
gap: "8px",
}}>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}>
<span style={{ fontWeight: "bold", fontSize: "16px" }}>Task</span>
<VSCodeButton
appearance="icon"
onClick={onClose}
style={{ marginTop: "-5px", marginRight: "-5px" }}>
<span className="codicon codicon-close"></span>
</VSCodeButton>
</div>
<div style={{ fontSize: "var(--vscode-font-size)", lineHeight: "1.5" }}>
<TextTruncate
line={isExpanded ? 0 : 3}
@@ -58,20 +71,24 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut,
)}
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<span style={{ fontWeight: "bold" }}>Tokens:</span>
<div style={{ display: "flex", gap: "8px" }}>
<span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<i className="codicon codicon-arrow-down" style={{ fontSize: "12px", marginBottom: "-1px" }} />
{tokensIn.toLocaleString()}
</span>
<span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<i className="codicon codicon-arrow-up" style={{ fontSize: "12px", marginBottom: "-1px" }} />
{tokensOut.toLocaleString()}
</span>
</div>
<span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<i
className="codicon codicon-arrow-down"
style={{ fontSize: "12px", marginBottom: "-2px" }}
/>
{tokensIn.toLocaleString()}
</span>
<span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<i
className="codicon codicon-arrow-up"
style={{ fontSize: "12px", marginBottom: "-2px" }}
/>
{tokensOut.toLocaleString()}
</span>
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<span style={{ fontWeight: "bold" }}>API Cost:</span>
<span>${totalCost.toFixed(4)}</span>
</div>