Skip to content

Commit 972d034

Browse files
Himanshu-Singh-Chauhannang-dev
Himanshu-Singh-Chauhan
authored and
nang-dev
committed
ui changes 1
API REQUEST BADGE input box auto approve setttings list
1 parent f5c73e5 commit 972d034

5 files changed

Lines changed: 217 additions & 84 deletions

File tree

‎webview-ui/src/components/chat/AutoApproveMenu.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
22
import { useCallback, useState } from "react"
33
import { useExtensionState } from "../../context/ExtensionStateContext"
44
import { vscode } from "../../utils/vscode"
5+
import { vsCodeBadge } from "@vscode/webview-ui-toolkit"
56

67
interface AutoApproveAction {
78
id: string
@@ -158,9 +159,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
158159
style={{
159160
padding: "0 15px",
160161
userSelect: "none",
161-
borderTop: isExpanded
162-
? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
163-
: "none",
164162
overflowY: "auto",
165163
...style,
166164
}}>
@@ -169,7 +167,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
169167
display: "flex",
170168
alignItems: "center",
171169
gap: "8px",
172-
padding: isExpanded ? "8px 0" : "8px 0 0 0",
170+
// padding: isExpanded ? "8px 0" : "8px 0 0 0",
173171
cursor: "pointer",
174172
}}
175173
onClick={toggleExpanded}>

‎webview-ui/src/components/chat/ChatRow.tsx‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ import Thumbnails from "../common/Thumbnails"
2020
import McpResourceRow from "../mcp/McpResourceRow"
2121
import McpToolRow from "../mcp/McpToolRow"
2222
import { highlightMentions } from "./TaskHeader"
23+
import {
24+
vscBackground,
25+
vscBadgeBackground,
26+
vscBadgeForeground,
27+
vscButtonBackground,
28+
vscEditorBackground,
29+
vscFocusBorder,
30+
vscInputBackground,
31+
} from "../ui"
32+
import { ServerIcon } from "@heroicons/react/24/outline"
33+
import { vsCodeBadge } from "@vscode/webview-ui-toolkit"
2334

2435
interface ChatRowProps {
2536
message: ClineMessage
@@ -203,7 +214,13 @@ export const ChatRowContent = ({
203214
<span style={{ color: errorColor, fontWeight: "bold" }}>API Streaming Failed</span>
204215
)
205216
) : cost != null ? (
206-
<span style={{ color: normalColor, fontWeight: "bold" }}>API Request</span>
217+
<span
218+
className={`font-bold flex items-center gap-2`}
219+
// style={{ color: vscBadgeBackground }}
220+
>
221+
<ServerIcon className="w-4 h-4" />
222+
API REQUEST
223+
</span>
207224
) : apiRequestFailedMessage ? (
208225
<span style={{ color: errorColor, fontWeight: "bold" }}>API Request Failed</span>
209226
) : (
@@ -521,13 +538,15 @@ export const ChatRowContent = ({
521538
msUserSelect: "none",
522539
}}
523540
onClick={onToggleExpand}>
524-
<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
525-
{icon}
526-
{title}
527-
<VSCodeBadge style={{ opacity: cost != null && cost > 0 ? 1 : 0 }}>
528-
${Number(cost || 0)?.toFixed(4)}
529-
</VSCodeBadge>
541+
{/* <VSCodeBadge style={{ opacity: cost != null && cost > 0 ? 1 : 0 }} className=""> */}
542+
<div
543+
className="flex items-center gap-2 p-2 rounded-md"
544+
style={{ backgroundColor: vscBadgeBackground }}>
545+
<div className="flex items-center gap-2 flex-grow">
546+
{title}${Number(cost || 0)?.toFixed(4)}
547+
</div>
530548
</div>
549+
{/* </VSCodeBadge> */}
531550
<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
532551
</div>
533552
{((cost == null && apiRequestFailedMessage) || apiReqStreamingFailedMessage) && (

‎webview-ui/src/components/chat/ChatTextArea.tsx‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,21 @@ import { Mode, getAllModes } from "../../../../src/shared/modes"
1818
import { CaretIcon } from "../common/CaretIcon"
1919
import { Button } from "../ui/button-pear-scn"
2020
import { ArrowTurnDownLeftIcon, TrashIcon } from "@heroicons/react/16/solid"
21-
import { getFontSize, lightGray, vscEditorBackground, vscFocusBorder, vscInputBackground } from "../ui"
21+
import {
22+
getFontSize,
23+
lightGray,
24+
vscBackground,
25+
vscBadgeBackground,
26+
vscButtonBackground,
27+
vscButtonForeground,
28+
vscEditorBackground,
29+
vscFocusBorder,
30+
vscForeground,
31+
vscInputBackground,
32+
vscInputBorder,
33+
vscInputBorderFocus,
34+
vscListActiveBackground,
35+
} from "../ui"
2236
import styled from "styled-components"
2337
import { Listbox } from "@headlessui/react"
2438
import { ImageIcon } from "@radix-ui/react-icons"
@@ -673,6 +687,51 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
673687
</div>
674688
)}
675689

690+
<div
691+
style={{
692+
display: "flex",
693+
justifyContent: "space-between",
694+
alignItems: "center",
695+
marginTop: "auto",
696+
paddingTop: "2px",
697+
}}>
698+
<div
699+
style={{
700+
display: "flex",
701+
alignItems: "center",
702+
gap: "8px",
703+
}}>
704+
<Button
705+
className={`gap-1 text-xs bg-input text-input-foreground h-6 px-2 hover:bg-sidebar-background`}
706+
variant={"secondary"}
707+
disabled={textAreaDisabled}
708+
onClick={() => !textAreaDisabled && onSend()}
709+
style={{
710+
color: vscForeground,
711+
backgroundColor: vscInputBackground,
712+
border: `1px solid ${vscInputBorder}`,
713+
}}>
714+
@ Context
715+
</Button>
716+
</div>
717+
718+
{/* <div
719+
style={{
720+
display: "flex",
721+
alignItems: "center",
722+
gap: "12px",
723+
}}>
724+
725+
<Button
726+
className="gap-1 h-6 bg-[#AFF349] text-[#005A4E] text-xs px-2"
727+
disabled={textAreaDisabled}
728+
onClick={() => !textAreaDisabled && onSend()}>
729+
<ArrowTurnDownLeftIcon width="12px" height="12px" />
730+
Send
731+
</Button>
732+
</div> */}
733+
</div>
734+
676735
<div
677736
style={{
678737
position: "relative",
@@ -730,7 +789,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
730789
onHeightChange?.(height)
731790
}}
732791
placeholder={placeholderText}
733-
minRows={2}
792+
minRows={0}
734793
maxRows={15}
735794
autoFocus={true}
736795
style={{

‎webview-ui/src/components/chat/ChatView.tsx‎

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ import TaskHeader from "./TaskHeader"
2828
import AutoApproveMenu from "./AutoApproveMenu"
2929
import { AudioType } from "../../../../src/shared/WebviewMessage"
3030
import { validateCommand } from "../../utils/command-validation"
31+
import { Button } from "../ui/button-pear-scn"
32+
import { DownloadIcon } from "@radix-ui/react-icons"
33+
import { vscBackground, vscBadgeBackground, vscEditorBackground, vscForeground, vscInputBorder } from "../ui"
3134

3235
interface ChatViewProps {
3336
isHidden: boolean
@@ -991,6 +994,22 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
991994
setMode={setMode}
992995
/>
993996
)}
997+
{!task && (
998+
<AutoApproveMenu
999+
style={{
1000+
marginLeft: "50px",
1001+
marginRight: "50px",
1002+
paddingLeft: "25px",
1003+
paddingRight: "25px",
1004+
paddingTop: "10px",
1005+
paddingBottom: "10px",
1006+
borderRadius: "12px",
1007+
flex: "0 1 auto", // flex-grow: 0, flex-shrink: 1, flex-basis: auto
1008+
minHeight: 0,
1009+
background: vscEditorBackground,
1010+
}}
1011+
/>
1012+
)}
9941013
{task ? (
9951014
<TaskHeader
9961015
task={task}
@@ -1010,7 +1029,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
10101029
minHeight: 0,
10111030
overflowY: "auto",
10121031
display: "flex",
1013-
flexDirection: "column",
1032+
flexDirection: "column-reverse",
10141033
paddingBottom: "10px",
10151034
}}>
10161035
{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
@@ -1040,15 +1059,6 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
10401059
// This ensures it takes its natural height when there's space
10411060
// but becomes scrollable when the viewport is too small
10421061
*/}
1043-
{!task && (
1044-
<AutoApproveMenu
1045-
style={{
1046-
marginBottom: -2,
1047-
flex: "0 1 auto", // flex-grow: 0, flex-shrink: 1, flex-basis: auto
1048-
minHeight: 0,
1049-
}}
1050-
/>
1051-
)}
10521062

10531063
{task && (
10541064
<>
@@ -1079,7 +1089,20 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
10791089
initialTopMostItemIndex={groupedMessages.length - 1}
10801090
/>
10811091
</div>
1082-
<AutoApproveMenu />
1092+
<AutoApproveMenu
1093+
style={{
1094+
marginLeft: "50px",
1095+
marginRight: "50px",
1096+
paddingLeft: "25px",
1097+
paddingRight: "25px",
1098+
paddingTop: "10px",
1099+
paddingBottom: "10px",
1100+
borderRadius: "12px",
1101+
flex: "0 1 auto", // flex-grow: 0, flex-shrink: 1, flex-basis: auto
1102+
minHeight: 0,
1103+
background: vscEditorBackground,
1104+
}}
1105+
/>
10831106
{showScrollToBottom ? (
10841107
<div
10851108
style={{
@@ -1107,28 +1130,30 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
11071130
padding: `${primaryButtonText || secondaryButtonText || isStreaming ? "10" : "0"}px 15px 0px 15px`,
11081131
}}>
11091132
{primaryButtonText && !isStreaming && (
1110-
<VSCodeButton
1111-
appearance="primary"
1133+
<Button
11121134
disabled={!enableButtons}
11131135
style={{
1136+
backgroundColor: "#AFF349",
11141137
flex: secondaryButtonText ? 1 : 2,
11151138
marginRight: secondaryButtonText ? "6px" : "0",
11161139
}}
11171140
onClick={(e) => handlePrimaryButtonClick(inputValue, selectedImages)}>
11181141
{primaryButtonText}
1119-
</VSCodeButton>
1142+
</Button>
11201143
)}
11211144
{(secondaryButtonText || isStreaming) && (
1122-
<VSCodeButton
1123-
appearance="secondary"
1145+
<Button
1146+
variant="secondary"
11241147
disabled={!enableButtons && !(isStreaming && !didClickCancel)}
11251148
style={{
1149+
backgroundColor: vscInputBorder,
1150+
color: vscForeground,
11261151
flex: isStreaming ? 2 : 1,
11271152
marginLeft: isStreaming ? 0 : "6px",
11281153
}}
11291154
onClick={(e) => handleSecondaryButtonClick(inputValue, selectedImages)}>
11301155
{isStreaming ? "Cancel" : secondaryButtonText}
1131-
</VSCodeButton>
1156+
</Button>
11321157
)}
11331158
</div>
11341159
)}

0 commit comments

Comments
 (0)