@@ -169,7 +168,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
display: "flex",
alignItems: "center",
gap: "8px",
- padding: isExpanded ? "8px 0" : "8px 0 0 0",
+ // padding: isExpanded ? "8px 0" : "8px 0 0 0",
cursor: "pointer",
}}
onClick={toggleExpanded}>
diff --git a/webview-ui/src/components/chat/BrowserSessionRow.tsx b/webview-ui/src/components/chat/BrowserSessionRow.tsx
index 2c29a7548ed..a4c470971c4 100644
--- a/webview-ui/src/components/chat/BrowserSessionRow.tsx
+++ b/webview-ui/src/components/chat/BrowserSessionRow.tsx
@@ -242,7 +242,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}>
)}
- <>Roo wants to use the browser:
+ <>Agent wants to use the browser:
),
- Roo wants to execute this command:,
+
+ Agent wants to execute this command:
+ ,
]
case "use_mcp_server":
const mcpServerUse = JSON.parse(message.text || "{}") as ClineAskUseMcpServer
@@ -150,16 +166,23 @@ export const ChatRowContent = ({
style={{ color: normalColor, marginBottom: "-1.5px" }}>
),
- Roo wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on the{" "}
-
@@ -408,7 +468,7 @@ export const ChatRowContent = ({
{message.type === "ask" ? (
<>
- Roo wants to search this directory for {mcpServerUse.serverName} MCP server:
+ Agent wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on
+ the {mcpServerUse.serverName} MCP server:
,
]
case "completion_result":
return [
- ,
- Task Completed,
+ //
+ // ,
+
+
,
]
case "api_req_retry_delayed":
return []
@@ -203,7 +226,13 @@ export const ChatRowContent = ({
API Streaming Failed
)
) : cost != null ? (
- API Request
+
+
+
+ ,Roo has a question:,
+
,
]
default:
return [null, null]
@@ -255,9 +286,27 @@ export const ChatRowContent = ({
case "appliedDiff":
return (
<>
-
- {toolIcon(tool.tool === "appliedDiff" ? "diff" : "edit")}
- Roo wants to edit this file:
+
-
@@ -388,7 +448,7 @@ export const ChatRowContent = ({
{toolIcon("file-code")}
{message.type === "ask"
- ? "Roo wants to view source code definition names used in this directory:"
+ ? "Agent wants to view source code definition names used in this directory:"
: "Roo viewed source code definition names used in this directory:"}
+
+ Agent wants to edit
+
+
+ {removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
+
+
- {toolIcon("new-file")}
- Roo wants to create a new file:
+
-
@@ -368,7 +428,7 @@ export const ChatRowContent = ({
{toolIcon("folder-opened")}
{message.type === "ask"
- ? "Roo wants to recursively view all files in this directory:"
+ ? "Agent wants to recursively view all files in this directory:"
: "Roo recursively viewed all files in this directory:"}
+ {/* {toolIcon("new-file")} */}
+
- {toolIcon("file-code")}
-
- {message.type === "ask" ? "Roo wants to read this file:" : "Roo read this file:"}
-
-
{/*
+ style={{ backgroundColor: vscEditorBackground }}
+ className="flex items-center gap-2 p-2 rounded-lg">
+ {
+ vscode.postMessage({ type: "openFile", text: tool.content })
+ }}
+ />
)
@@ -348,7 +408,7 @@ export const ChatRowContent = ({
{toolIcon("folder-opened")}
{message.type === "ask"
- ? "Roo wants to view the top level files in this directory:"
+ ? "Agent wants to view the top level files in this directory:"
: "Roo viewed the top level files in this directory:"}
{
- vscode.postMessage({ type: "openFile", text: tool.content })
+ backgroundColor: CODE_BLOCK_BG_COLOR,
+ overflow: "hidden",
+ width: "fit-content",
}}>
- {tool.path?.startsWith(".") && .}
-
+ {message.type === "ask" ? "Agent wants to read this file" : "Roo read this file:"}
+
+
+ {
+ vscode.postMessage({ type: "openFile", text: tool.content })
}}>
- {removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
-
-
-
+ {tool.path?.startsWith(".") && .}
+
+ {removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
+
+
+ {/*
+ */}
+
{tool.regex}:
+ Agent wants to search this directory for {tool.regex}:
) : (
<>
@@ -435,7 +495,7 @@ export const ChatRowContent = ({
// {isInspecting ? {tool.mode} mode
+ Agent wants to switch to {tool.mode} mode
{tool.reason ? ` because: ${tool.reason}` : ""}
) : (
@@ -479,7 +539,7 @@ export const ChatRowContent = ({
{toolIcon("new-file")}
- Roo wants to create a new task in
{tool.mode} mode:
+ Agent wants to create a new task in {tool.mode} mode:
@@ -521,14 +581,24 @@ export const ChatRowContent = ({
msUserSelect: "none",
}}
onClick={onToggleExpand}>
-
- {icon}
- {title}
- 0 ? 1 : 0 }}>
- ${Number(cost || 0)?.toFixed(4)}
-
+ {/* 0 ? 1 : 0 }} className=""> */}
+ */}
{((cost == null && apiRequestFailedMessage) || apiReqStreamingFailedMessage) && (
<>
@@ -608,13 +678,17 @@ export const ChatRowContent = ({
return (
+
-
+ {/*
+
+ {isStreaming && (
+
+ {title}${Number(cost || 0)?.toFixed(4)}
+
+
+
+
+ )}
+ = ({
= ({
display: "flex",
alignItems: "center",
}}>
-
-
)}
@@ -252,39 +296,51 @@ const TaskHeader: React.FC = ({
)}
{task.images && task.images.length > 0 &&
{/* {apiProvider === "" && (
{highlightMentions(message.text)}
+
`
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ margin-bottom: 4px;
+ list-style: none;
+ padding: 6px;
+ white-space: nowrap;
+ cursor: default;
+ z-index: 50;
+ border: 1px solid ${lightGray}10;
+ border-radius: 10px;
+ background-color: ${vscEditorBackground};
+ max-height: 300px;
+ min-width: 100px;
+ overflow-y: auto;
+
+ font-size: ${getFontSize() - 2}px;
+ user-select: none;
+ outline: none;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+
+ & > * {
+ margin: 4px 0;
+ }
+`
+
+interface ListboxOptionProps {
+ isCurrentModel?: boolean
+}
+
+const StyledListboxOption = styled(Listbox.Option)`
+ cursor: pointer;
+ border-radius: 6px;
+ padding: 5px 4px;
+
+ &:hover {
+ background: ${(props) => (props.isCurrentModel ? `${lightGray}66` : `${lightGray}33`)};
+ }
+
+ background: ${(props) => (props.isCurrentModel ? `${lightGray}66` : "transparent")};
+`
+
+const StyledTrashIcon = styled(TrashIcon as React.ComponentType)`
+ cursor: pointer;
+ flex-shrink: 0;
+ margin-left: 8px;
+ &:hover {
+ color: red;
+ }
+`
+
+const Divider = styled.div`
+ height: 2px;
+ background-color: ${lightGray}35;
+ margin: 0px 4px;
+`
+
+const ListboxWrapper = styled.div`
+ position: relative;
+ display: inline-block;
+`
interface ChatTextAreaProps {
inputValue: string
@@ -30,6 +136,7 @@ interface ChatTextAreaProps {
onHeightChange?: (height: number) => void
mode: Mode
setMode: (value: Mode) => void
+ isNewTask: boolean
}
const ChatTextArea = forwardRef(
@@ -47,6 +154,7 @@ const ChatTextArea = forwardRef(
onHeightChange,
mode,
setMode,
+ isNewTask,
},
ref,
) => {
@@ -498,377 +606,386 @@ const ChatTextArea = forwardRef(
[updateCursorPosition],
)
- const selectStyle = {
- fontSize: "11px",
- cursor: textAreaDisabled ? "not-allowed" : "pointer",
- backgroundColor: "transparent",
- border: "none",
- color: "var(--vscode-foreground)",
- opacity: textAreaDisabled ? 0.5 : 0.8,
- outline: "none",
- paddingLeft: "20px",
- paddingRight: "6px",
- WebkitAppearance: "none" as const,
- MozAppearance: "none" as const,
- appearance: "none" as const,
- }
-
- const optionStyle = {
- backgroundColor: "var(--vscode-dropdown-background)",
- color: "var(--vscode-dropdown-foreground)",
- }
-
- const caretContainerStyle = {
- position: "absolute" as const,
- left: 6,
- top: "50%",
- transform: "translateY(-45%)",
- pointerEvents: "none" as const,
- opacity: textAreaDisabled ? 0.5 : 0.8,
- }
-
return (
-
)
diff --git a/webview-ui/src/components/chat/TaskHeader.tsx b/webview-ui/src/components/chat/TaskHeader.tsx
index f51bf13b0e9..cfda6275b71 100644
--- a/webview-ui/src/components/chat/TaskHeader.tsx
+++ b/webview-ui/src/components/chat/TaskHeader.tsx
@@ -8,6 +8,11 @@ import Thumbnails from "../common/Thumbnails"
import { mentionRegexGlobal } from "../../../../src/shared/context-mentions"
import { formatLargeNumber } from "../../utils/format"
import { normalizeApiConfiguration } from "../settings/ApiOptions"
+import { BackspaceIcon, ChatBubbleOvalLeftIcon } from "@heroicons/react/24/outline"
+import { vscBadgeBackground, vscEditorBackground, vscInputBackground } from "../ui"
+import { DownloadIcon } from "@radix-ui/react-icons"
+import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
+import { Tail } from "../ui/tail"
interface TaskHeaderProps {
task: ClineMessage
@@ -113,15 +118,17 @@ const TaskHeader: React.FC {
- e.preventDefault()
- const files = Array.from(e.dataTransfer.files)
- const text = e.dataTransfer.getData("text")
- if (text) {
- const newValue = inputValue.slice(0, cursorPosition) + text + inputValue.slice(cursorPosition)
- setInputValue(newValue)
- const newCursorPosition = cursorPosition + text.length
- setCursorPosition(newCursorPosition)
- setIntendedCursorPosition(newCursorPosition)
- return
- }
- const acceptedTypes = ["png", "jpeg", "webp"]
- const imageFiles = files.filter((file) => {
- const [type, subtype] = file.type.split("/")
- return type === "image" && acceptedTypes.includes(subtype)
- })
- if (!shouldDisableImages && imageFiles.length > 0) {
- const imagePromises = imageFiles.map((file) => {
- return new Promise((resolve) => {
- const reader = new FileReader()
- reader.onloadend = () => {
- if (reader.error) {
- console.error("Error reading file:", reader.error)
- resolve(null)
- } else {
- const result = reader.result
- resolve(typeof result === "string" ? result : null)
- }
- }
- reader.readAsDataURL(file)
- })
- })
- const imageDataArray = await Promise.all(imagePromises)
- const dataUrls = imageDataArray.filter((dataUrl): dataUrl is string => dataUrl !== null)
- if (dataUrls.length > 0) {
- setSelectedImages((prevImages) =>
- [...prevImages, ...dataUrls].slice(0, MAX_IMAGES_PER_MESSAGE),
- )
- if (typeof vscode !== "undefined") {
- vscode.postMessage({
- type: "draggedImages",
- dataUrls: dataUrls,
- })
- }
- } else {
- console.warn("No valid images were processed")
- }
- }
- }}
- onDragOver={(e) => {
- e.preventDefault()
- }}>
- {showContextMenu && (
-
-
-
- )}
-
+ <>
-
)}
@@ -1061,7 +1085,6 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
initialTopMostItemIndex={groupedMessages.length - 1}
/>
0 ? `${thumbnailsHeight + 16}px` : 0,
- zIndex: 1,
- }}
- />
- {
- if (typeof ref === "function") {
- ref(el)
- } else if (ref) {
- ref.current = el
- }
- textAreaRef.current = el
- }}
- value={inputValue}
- disabled={textAreaDisabled}
- onChange={(e) => {
- handleInputChange(e)
- updateHighlights()
- }}
- onFocus={() => setIsFocused(true)}
- onKeyDown={handleKeyDown}
- onKeyUp={handleKeyUp}
- onBlur={handleBlur}
- onPaste={handlePaste}
- onSelect={updateCursorPosition}
- onMouseUp={updateCursorPosition}
- onHeightChange={(height) => {
- if (textAreaBaseHeight === undefined || height < textAreaBaseHeight) {
- setTextAreaBaseHeight(height)
+ flexDirection: "column",
+ gap: "8px",
+ backgroundColor: vscEditorBackground,
+ // margin: "10px 15px",
+ padding: "8px",
+ outline: "none",
+ // border: "1px solid",
+ borderColor: "transparent",
+ borderRadius: "12px",
+ }}
+ onDrop={async (e) => {
+ e.preventDefault()
+ const files = Array.from(e.dataTransfer.files)
+ const text = e.dataTransfer.getData("text")
+ if (text) {
+ const newValue =
+ inputValue.slice(0, cursorPosition) + text + inputValue.slice(cursorPosition)
+ setInputValue(newValue)
+ const newCursorPosition = cursorPosition + text.length
+ setCursorPosition(newCursorPosition)
+ setIntendedCursorPosition(newCursorPosition)
+ return
+ }
+ const acceptedTypes = ["png", "jpeg", "webp"]
+ const imageFiles = files.filter((file) => {
+ const [type, subtype] = file.type.split("/")
+ return type === "image" && acceptedTypes.includes(subtype)
+ })
+ if (!shouldDisableImages && imageFiles.length > 0) {
+ const imagePromises = imageFiles.map((file) => {
+ return new Promise((resolve) => {
+ const reader = new FileReader()
+ reader.onloadend = () => {
+ if (reader.error) {
+ console.error("Error reading file:", reader.error)
+ resolve(null)
+ } else {
+ const result = reader.result
+ resolve(typeof result === "string" ? result : null)
+ }
+ }
+ reader.readAsDataURL(file)
+ })
+ })
+ const imageDataArray = await Promise.all(imagePromises)
+ const dataUrls = imageDataArray.filter((dataUrl): dataUrl is string => dataUrl !== null)
+ if (dataUrls.length > 0) {
+ setSelectedImages((prevImages) =>
+ [...prevImages, ...dataUrls].slice(0, MAX_IMAGES_PER_MESSAGE),
+ )
+ if (typeof vscode !== "undefined") {
+ vscode.postMessage({
+ type: "draggedImages",
+ dataUrls: dataUrls,
+ })
+ }
+ } else {
+ console.warn("No valid images were processed")
}
- onHeightChange?.(height)
- }}
- placeholder={placeholderText}
- minRows={3}
- maxRows={15}
- autoFocus={true}
- style={{
- width: "100%",
- outline: "none",
- boxSizing: "border-box",
- backgroundColor: "transparent",
- color: "var(--vscode-input-foreground)",
- borderRadius: 2,
- fontFamily: "var(--vscode-font-family)",
- fontSize: "var(--vscode-editor-font-size)",
- lineHeight: "var(--vscode-editor-line-height)",
- resize: "none",
- overflowX: "hidden",
- overflowY: "auto",
- border: "none",
- padding: "2px",
- paddingRight: "8px",
- marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0,
- cursor: textAreaDisabled ? "not-allowed" : undefined,
- flex: "0 1 auto",
- zIndex: 2,
- scrollbarWidth: "none",
- }}
- onScroll={() => updateHighlights()}
- />
-
-
- {selectedImages.length > 0 && (
- {
+ e.preventDefault()
}}>
+ {showContextMenu && (
+
{
+ if (typeof ref === "function") {
+ ref(el)
+ } else if (ref) {
+ ref.current = el
+ }
+ textAreaRef.current = el
+ }}
+ value={inputValue}
+ disabled={textAreaDisabled}
+ onChange={(e) => {
+ handleInputChange(e)
+ updateHighlights()
+ }}
+ onFocus={() => setIsFocused(true)}
+ onKeyDown={handleKeyDown}
+ onKeyUp={handleKeyUp}
+ onBlur={handleBlur}
+ onPaste={handlePaste}
+ onSelect={updateCursorPosition}
+ onMouseUp={updateCursorPosition}
+ onHeightChange={(height) => {
+ if (textAreaBaseHeight === undefined || height < textAreaBaseHeight) {
+ setTextAreaBaseHeight(height)
+ }
+ onHeightChange?.(height)
+ }}
+ placeholder={placeholderText}
+ minRows={isNewTask ? 3 : 1}
+ maxRows={15}
+ autoFocus={true}
+ style={{
+ width: "100%",
+ outline: "none",
+ boxSizing: "border-box",
+ backgroundColor: "transparent",
+ color: "var(--vscode-input-foreground)",
+ borderRadius: 2,
+ fontFamily: "var(--vscode-font-family)",
+ fontSize: "var(--vscode-editor-font-size)",
+ lineHeight: "var(--vscode-editor-line-height)",
+ resize: "none",
+ overflowX: "hidden",
+ overflowY: "auto",
+ border: "none",
+ padding: "2px",
+ paddingTop: "8px",
+ paddingBottom: "8px",
+ paddingRight: "8px",
+ marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0,
+ cursor: textAreaDisabled ? "not-allowed" : undefined,
+ flex: "0 1 auto",
+ zIndex: 2,
+ scrollbarWidth: "none",
+ }}
+ onScroll={() => updateHighlights()}
+ />
+ {selectedImages.length > 0 && (
+
+
+
+ )}
+
-
+
-
- !shouldDisableImages && onSelectImages()}
+ />
+ {/*
-
+ @ Context
+
+
+
+
+
*/}
+
-
-
+ fontFamily: "var(--vscode-font-family)",
+ fontSize: "var(--vscode-editor-font-size)",
+ lineHeight: "var(--vscode-editor-line-height)",
+ padding: "2px",
+ paddingRight: "8px",
+ marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0,
+ zIndex: 1,
+ }}
+ />
+
-
-
-
-
- {isEnhancingPrompt ? (
-
- ) : (
- !textAreaDisabled && handleEnhancePrompt()}
- style={{ fontSize: 16.5 }}
- />
- )}
+
+
+
+
- !shouldDisableImages && onSelectImages()}
- style={{ fontSize: 16.5 }}
- />
- !textAreaDisabled && onSend()}
- style={{ fontSize: 15 }}
- />
+ {isEnhancingPrompt ? (
+
+ ) : (
+ !textAreaDisabled && handleEnhancePrompt()}
+ style={{ fontSize: 16.5 }}
+ />
+ )}
+
+
+
+
+ {
+ if (value === "prompts-action") {
+ window.postMessage({ type: "action", action: "promptsButtonClicked" })
+ return
+ }
+ setMode(value as Mode)
+ vscode.postMessage({
+ type: "mode",
+ text: value,
+ })
+ }}
+ disabled={textAreaDisabled}>
+
+ {getAllModes(customModes).find((m) => m.slug === mode)?.name}
+
+
+ {getAllModes(customModes).map((mode) => (
+
+ {mode.name}
+
+ ))}
+
+ Edit...
+
+
+
+
+
+
+ {
+ if (value === "settings-action") {
+ window.postMessage({ type: "action", action: "settingsButtonClicked" })
+ return
+ }
+ vscode.postMessage({
+ type: "loadApiConfiguration",
+ text: value,
+ })
+ }}
+ disabled={textAreaDisabled}>
+
+ {currentApiConfigName}
+
+
+ {(listApiConfigMeta || []).map((config) => (
+
+ {config.name}
+
+ ))}
+
+ Edit...
+
+
+
+
+
+
)
},
)
diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index 519b7e5efb6..ef857e06e26 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -28,6 +28,18 @@ import TaskHeader from "./TaskHeader"
import AutoApproveMenu from "./AutoApproveMenu"
import { AudioType } from "../../../../src/shared/WebviewMessage"
import { validateCommand } from "../../utils/command-validation"
+import { Button } from "../ui/button-pear-scn"
+import { DownloadIcon } from "@radix-ui/react-icons"
+import {
+ vscBackground,
+ vscBadgeBackground,
+ vscButtonBackground,
+ vscEditorBackground,
+ vscForeground,
+ vscInputBorder,
+ vscSidebarBorder,
+} from "../ui"
+import splashIcon from "../../../../assets/icons/pearai-agent-splash.svg"
interface ChatViewProps {
isHidden: boolean
@@ -872,11 +884,11 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
useEvent("wheel", handleWheel, window, { passive: true }) // passive improves scrolling performance
const placeholderText = useMemo(() => {
- const baseText = task ? "Type a message..." : "Type your task here..."
- const contextText = "(@ to add context"
- const imageText = shouldDisableImages ? "" : ", hold shift to drag in images"
- const helpText = imageText ? `\n${contextText}${imageText})` : `\n${contextText})`
- return baseText + helpText
+ const baseText = task ? "Ask a follow up." : "Give PearAI Agent a task here."
+ const contextText = " Use @ to add context."
+ const imageText = shouldDisableImages ? "" : "\nhold shift to drag in images"
+ const helpText = imageText ? `\n${contextText}${imageText}` : `\n${contextText}`
+ return baseText + contextText
}, [task, shouldDisableImages])
const itemContent = useCallback(
@@ -966,6 +978,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
left: 0,
right: 0,
bottom: 0,
+ padding: "12px 12px",
display: isHidden ? "none" : "flex",
flexDirection: "column",
overflow: "hidden",
@@ -989,20 +1002,31 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
minHeight: 0,
overflowY: "auto",
display: "flex",
- flexDirection: "column",
+ flexDirection: "column-reverse",
paddingBottom: "10px",
}}>
{showAnnouncement &&
-
+ {messages.length === 0 && (
+ <>
+ What can I do for you?
-- Thanks to the latest breakthroughs in agentic coding capabilities, I can handle complex - software development tasks step-by-step. With tools that let me create & edit files, explore - complex projects, use the browser, and execute terminal commands (after you grant - permission), I can assist you in ways that go beyond code completion or tech support. I can - even use MCP to create new tools and extend my own capabilities. -
-
+
+
+ )}
{taskHistory.length > 0 &&
+ 
+
+
+
+
+
+ PearAI Coding Agent
+
+ Powered by Roo Code / Cline
+
+
+ Autonomous coding agent that has access to your development environment (with
+ your permission) for a feedback loop to add features, fix bugs, and more.
+
+
{primaryButtonText && !isStreaming && (
- handlePrimaryButtonClick(inputValue, selectedImages)}>
{primaryButtonText}
-
+
)}
{(secondaryButtonText || isStreaming) && (
- handleSecondaryButtonClick(inputValue, selectedImages)}>
{isStreaming ? "Cancel" : secondaryButtonText}
-
+
)}
)}
+ = ({
minWidth: 0, // This allows the div to shrink below its content size
}}
onClick={() => setIsTaskExpanded(!isTaskExpanded)}>
-
+
-
+ */}
{isTaskExpanded && (
<>
@@ -215,25 +270,14 @@ const TaskHeader: React.FC
+ {/*
*/}
-
+
- Task{!isTaskExpanded && ":"}
+
+ TASK
+ {!isTaskExpanded && ":"}
+
{!isTaskExpanded && (
{highlightMentions(task.text, false)}
)}
@@ -177,9 +187,54 @@ const TaskHeader: React.FC = ({
${totalCost?.toFixed(4)}
)}
-
+ {isCostAvailable && (
+
+
+
+ )}
+
+ {/* API Cost: */}
+ ${totalCost?.toFixed(4)}
+
+
+
+
+ {/* Tokens: */}
+
+
+ {formatLargeNumber(tokensIn || 0)}
+
+
+
+ {formatLargeNumber(tokensOut || 0)}
+
+
+
+
+ {/* setIsTextExpanded(!isTextExpanded)}>
- See more
-
+ /> */}
+
)}
+
+ {/*
+ Context
+
- = ({
)}
- {isCostAvailable && (
-
- Tokens:
-
-
- {formatLargeNumber(tokensIn || 0)}
-
-
-
- {formatLargeNumber(tokensOut || 0)}
-
+
- setIsTextExpanded(!isTextExpanded)}>
+
- {!isCostAvailable &&
- Context:
-
- {contextTokens
- ? `${formatLargeNumber(contextTokens)} (${contextPercentage}%)`
- : "-"}
-
+ {!isCostAvailable && (
+
{shouldShowPromptCacheInfo && (cacheReads !== undefined || cacheWrites !== undefined) && (
@@ -306,23 +362,10 @@ const TaskHeader: React.FC
+
+ )}
-
- )}
- API Cost:
- ${totalCost?.toFixed(4)}
-
- {
}
const ExportButton = () => (
- vscode.postMessage({ type: "exportCurrentTask" })}
- style={
- {
- // marginBottom: "-2px",
- // marginRight: "-2.5px",
- }
- }>
-
+ style={{
+ marginBottom: "-5px",
+ marginRight: "-2.5px",
+ cursor: "pointer",
+ }}>
+
)
export default memo(TaskHeader)
diff --git a/webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx b/webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx
index 5467c298c9b..1ce005bc9ed 100644
--- a/webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx
+++ b/webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx
@@ -34,6 +34,7 @@ describe("ChatTextArea", () => {
onHeightChange: jest.fn(),
mode: defaultModeSlug,
setMode: jest.fn(),
+ isNewTask: false,
}
beforeEach(() => {
diff --git a/webview-ui/src/components/common/CodeAccordian.tsx b/webview-ui/src/components/common/CodeAccordian.tsx
index 36f8fbc1f91..da3533023fe 100644
--- a/webview-ui/src/components/common/CodeAccordian.tsx
+++ b/webview-ui/src/components/common/CodeAccordian.tsx
@@ -41,15 +41,15 @@ const CodeAccordian = ({
return (
EXPORT
-
{(path || isFeedback || isConsoleLogs) && (
+ }}
+ className="font-bold">
{removeLeadingNonAlphanumeric(path ?? "") + "\u200E"}
diff --git a/webview-ui/src/components/history/HistoryPreview.tsx b/webview-ui/src/components/history/HistoryPreview.tsx
index 08aca2a44dc..719ad77edf1 100644
--- a/webview-ui/src/components/history/HistoryPreview.tsx
+++ b/webview-ui/src/components/history/HistoryPreview.tsx
@@ -3,6 +3,8 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
import { vscode } from "../../utils/vscode"
import { memo } from "react"
import { formatLargeNumber } from "../../utils/format"
+import { vscEditorBackground } from "../ui"
+import { CounterClockwiseClockIcon } from "@radix-ui/react-icons"
type HistoryPreviewProps = {
showHistoryView: () => void
@@ -30,20 +32,23 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
}
return (
-
+