Skip to content

Commit ccd61f7

Browse files
nang-devnang-dev
committed
Styling of text box
1 parent b237498 commit ccd61f7

4 files changed

Lines changed: 120 additions & 36 deletions

File tree

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

Lines changed: 110 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,90 @@ import { SelectDropdown, DropdownOptionType, Button } from "@/components/ui"
2424
import Thumbnails from "../common/Thumbnails"
2525
import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
2626
import ContextMenu from "./ContextMenu"
27-
import { VolumeX, Pin, Check } from "lucide-react"
2827
import { IconButton } from "./IconButton"
2928
import { cn } from "@/lib/utils"
3029

30+
import { VolumeX, Pin, Check, ChevronDown, ImageIcon } from "lucide-react"
31+
import { ArrowTurnDownLeftIcon } from "@heroicons/react/16/solid"
32+
import styled from "styled-components"
33+
import { Listbox } from "@headlessui/react"
34+
35+
const StyledListboxButton = styled(Listbox.Button)`
36+
border: none;
37+
background-color: var(--vscode-editor-background);
38+
border-radius: 12px;
39+
padding: 8px;
40+
display: flex;
41+
align-items: center;
42+
gap: 2px;
43+
user-select: none;
44+
cursor: pointer;
45+
font-size: var(--vscode-editor-font-size);
46+
color: var(--vscode-foreground);
47+
&:focus {
48+
outline: none;
49+
}
50+
`
51+
52+
const StyledListboxOptions = styled(Listbox.Options)<{ newSession: boolean }>`
53+
position: absolute;
54+
bottom: 100%;
55+
left: 0;
56+
margin-bottom: 4px;
57+
list-style: none;
58+
padding: 6px;
59+
white-space: nowrap;
60+
cursor: default;
61+
z-index: 50;
62+
border: 1px solid var(--vscode-input-border);
63+
border-radius: 10px;
64+
background-color: var(--vscode-editor-background);
65+
max-height: 300px;
66+
min-width: 100px;
67+
overflow-y: auto;
68+
font-size: var(--vscode-editor-font-size);
69+
user-select: none;
70+
outline: none;
71+
&::-webkit-scrollbar {
72+
display: none;
73+
}
74+
scrollbar-width: none;
75+
-ms-overflow-style: none;
76+
& > * {
77+
margin: 4px 0;
78+
}
79+
`
80+
81+
interface ListboxOptionProps {
82+
isCurrentModel?: boolean
83+
}
84+
85+
const StyledListboxOption = styled(Listbox.Option)<ListboxOptionProps>`
86+
cursor: pointer;
87+
border-radius: 6px;
88+
padding: 5px 4px;
89+
&:hover {
90+
background: ${(props) =>
91+
props.isCurrentModel
92+
? `var(--vscode-list-activeSelectionBackground)`
93+
: `var(--vscode-list-hoverBackground)`};
94+
}
95+
background: ${(props) => (props.isCurrentModel ? `var(--vscode-list-activeSelectionBackground)` : "transparent")};
96+
`
97+
98+
const Divider = styled.div`
99+
height: 2px;
100+
background-color: var(--vscode-input-border);
101+
margin: 0px 4px;
102+
`
103+
104+
const ListboxWrapper = styled.div`
105+
position: relative;
106+
display: inline-block;
107+
`
108+
109+
const CaretIcon = () => <ChevronDown className="size-4 opacity-50" />
110+
31111
interface ChatTextAreaProps {
32112
inputValue: string
33113
setInputValue: (value: string) => void
@@ -732,17 +812,20 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
732812
"flex",
733813
"flex-col",
734814
"gap-2",
735-
"bg-editor-background",
736-
"m-2 mt-1",
737-
"p-1.5",
815+
"m-[10px_15px]",
816+
"p-2",
738817
"outline-none",
739-
"border",
740818
"border-none",
741-
"w-[calc(100%-16px)]",
819+
"w-[calc(100%-30px)]",
820+
"rounded-xl",
742821
"ml-auto",
743822
"mr-auto",
744823
"box-border",
745-
)}>
824+
textAreaDisabled ? "opacity-50" : "opacity-100",
825+
)}
826+
style={{
827+
backgroundColor: "var(--vscode-editor-background)",
828+
}}>
746829
<div className="relative">
747830
<div
748831
className={cn("chat-text-area", "relative", "flex", "flex-col", "outline-none")}
@@ -817,15 +900,15 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
817900
"break-words",
818901
"text-transparent",
819902
"overflow-hidden",
820-
"font-vscode-font-family",
821-
"text-vscode-editor-font-size",
822-
"leading-vscode-editor-line-height",
823903
"py-2",
824904
"px-[9px]",
825905
"z-[1000]",
826906
)}
827907
style={{
828908
color: "transparent",
909+
fontFamily: "var(--vscode-font-family)",
910+
fontSize: "var(--vscode-editor-font-size)",
911+
lineHeight: "var(--vscode-editor-line-height)",
829912
}}
830913
/>
831914
<DynamicTextArea
@@ -863,20 +946,13 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
863946
className={cn(
864947
"w-full",
865948
"text-vscode-input-foreground",
866-
"font-vscode-font-family",
867-
"text-vscode-editor-font-size",
868-
"leading-vscode-editor-line-height",
869949
textAreaDisabled ? "cursor-not-allowed" : "cursor-text",
870950
"py-1.5 px-2",
871-
isFocused
872-
? "border border-vscode-focusBorder outline outline-vscode-focusBorder"
873-
: isDraggingOver
874-
? "border-2 border-dashed border-vscode-focusBorder"
875-
: "border border-transparent",
876-
textAreaDisabled ? "opacity-50" : "opacity-100",
877951
isDraggingOver
878-
? "bg-[color-mix(in_srgb,var(--vscode-input-background)_95%,var(--vscode-focusBorder))]"
879-
: "bg-vscode-input-background",
952+
? "border-2 border-dashed border-vscode-focusBorder"
953+
: "border-none outline-none focus:outline-none focus:ring-0",
954+
textAreaDisabled ? "opacity-50" : "opacity-100",
955+
"bg-transparent",
880956
"transition-background-color duration-150 ease-in-out",
881957
"will-change-background-color",
882958
"h-[100px]",
@@ -892,6 +968,12 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
892968
"z-[2]",
893969
"scrollbar-none",
894970
)}
971+
style={{
972+
fontFamily: "var(--vscode-font-family)",
973+
fontSize: "var(--vscode-editor-font-size)",
974+
lineHeight: "var(--vscode-editor-line-height)",
975+
outline: "none",
976+
}}
895977
onScroll={() => updateHighlights()}
896978
/>
897979
{isTtsPlaying && (
@@ -911,7 +993,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
911993
"flex",
912994
"gap-2",
913995
"text-xs",
914-
"text-descriptionForeground",
996+
"text-vscode-input-foreground",
915997
"pointer-events-none",
916998
"z-25",
917999
"bottom-1.5",
@@ -1089,25 +1171,19 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
10891171

10901172
{/* Right side - action buttons */}
10911173
<div className={cn("flex", "items-center", "gap-0.5", "shrink-0")}>
1092-
<IconButton
1093-
iconClass={isEnhancingPrompt ? "codicon-loading" : "codicon-sparkle"}
1094-
title={t("chat:enhancePrompt")}
1095-
disabled={textAreaDisabled}
1096-
isLoading={isEnhancingPrompt}
1097-
onClick={handleEnhancePrompt}
1098-
/>
10991174
<IconButton
11001175
iconClass="codicon-device-camera"
11011176
title={t("chat:addImages")}
11021177
disabled={shouldDisableImages}
11031178
onClick={onSelectImages}
11041179
/>
1105-
<IconButton
1106-
iconClass="codicon-send"
1107-
title={t("chat:sendMessage")}
1180+
<Button
1181+
className="gap-1 h-6 bg-[#E64C9E] text-white text-xs px-2 rounded-lg"
11081182
disabled={textAreaDisabled}
1109-
onClick={onSend}
1110-
/>
1183+
onClick={() => !textAreaDisabled && onSend()}>
1184+
<ArrowTurnDownLeftIcon width="12px" height="12px" />
1185+
Send
1186+
</Button>
11111187
</div>
11121188
</div>
11131189
</div>

‎webview-ui/src/components/settings/ApiOptions.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,9 @@ const ApiOptions = ({
108108
info: selectedModelInfo,
109109
} = useSelectedModel(apiConfiguration)
110110

111+
console.dir("IM HERE IN THIS BIHHHH")
112+
console.dir(selectedModelId)
113+
111114
const { data: routerModels } = useRouterModels()
112115

113116
// Update apiConfiguration.aiModelId whenever selectedModelId changes.

‎webview-ui/src/components/ui/hooks/useSelectedModel.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
} from "@roo/shared/api"
2929

3030
import { useRouterModels } from "./useRouterModels"
31-
import { pearAiDefaultModelId } from "@roo/shared/pearaiApi"
31+
import { pearAiDefaultModelId, pearAiDefaultModelInfo } from "@roo/shared/pearaiApi"
3232

3333
export const useSelectedModel = (apiConfiguration?: ApiConfiguration) => {
3434
const { data: routerModels, isLoading, isError } = useRouterModels()
@@ -76,6 +76,9 @@ function getSelectedModelInfo({
7676
apiConfiguration?: ApiConfiguration
7777
routerModels: RouterModels
7878
}): ModelInfo {
79+
console.dir("IM HERE AAAA")
80+
console.dir(provider)
81+
console.dir(id)
7982
switch (provider) {
8083
case "openrouter":
8184
return routerModels.openrouter[id] ?? routerModels.openrouter[openRouterDefaultModelId]
@@ -121,6 +124,8 @@ function getSelectedModelInfo({
121124
...vscodeLlmModels[modelFamily as keyof typeof vscodeLlmModels],
122125
supportsImages: false, // VSCode LM API currently doesn't support images.
123126
}
127+
case "pearai":
128+
return apiConfiguration?.pearaiAgentModels?.models[id] ?? pearAiDefaultModelInfo
124129
default:
125130
return anthropicModels[id as keyof typeof anthropicModels] ?? anthropicModels[anthropicDefaultModelId]
126131
}

‎webview-ui/src/i18n/locales/en/chat.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
"addImages": "Add images to message",
9393
"sendMessage": "Send message",
9494
"typeMessage": "Type a message...",
95-
"typeTask": "Type your task here...",
95+
"typeTask": "Give PearAI Agent a task here!",
9696
"addContext": "@ to add context, / to switch modes",
9797
"dragFiles": "hold shift to drag in files",
9898
"dragFilesImages": "hold shift to drag in files/images",

0 commit comments

Comments
 (0)