Chore: Prettier for consistant formatting (#794)

* Chore: Pretier for consistant formatting

- TODO: This PR needs to be updated by Saoud after he runs `npm install` & `npm format:fix` and commits the results of the prettier changes.

* Revert prettier config

* Run npm install

* Fix prettier config and ignore package lock

* Run format

---------

Co-authored-by: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
This commit is contained in:
Mark Percival
2024-11-21 13:13:54 -08:00
committed by GitHub
parent 8d7e28c5e3
commit 93e70c62f1
65 changed files with 2101 additions and 2091 deletions

View File

@@ -1,57 +1,57 @@
{
"name": "webview-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.101",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vscode/webview-ui-toolkit": "^1.4.0",
"debounce": "^2.1.1",
"fast-deep-equal": "^3.1.3",
"fuse.js": "^7.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-remark": "^2.1.0",
"react-scripts": "5.0.1",
"react-textarea-autosize": "^8.5.3",
"react-use": "^17.5.1",
"react-virtuoso": "^4.7.13",
"rehype-highlight": "^7.0.0",
"rewire": "^7.0.0",
"styled-components": "^6.1.13",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "node ./scripts/build-react-no-split.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/vscode-webview": "^1.57.5"
}
"name": "webview-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.101",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vscode/webview-ui-toolkit": "^1.4.0",
"debounce": "^2.1.1",
"fast-deep-equal": "^3.1.3",
"fuse.js": "^7.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-remark": "^2.1.0",
"react-scripts": "5.0.1",
"react-textarea-autosize": "^8.5.3",
"react-use": "^17.5.1",
"react-virtuoso": "^4.7.13",
"rehype-highlight": "^7.0.0",
"rewire": "^7.0.0",
"styled-components": "^6.1.13",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "node ./scripts/build-react-no-split.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/vscode-webview": "^1.57.5"
}
}

View File

@@ -1,20 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@@ -23,12 +20,12 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@@ -37,6 +34,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
--></body>
</html>

View File

@@ -1,25 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@@ -91,7 +91,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
nextActionMessages.length > 0
? {
messages: [...nextActionMessages],
}
}
: undefined,
})
@@ -121,7 +121,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
nextActionMessages.length > 0
? {
messages: [...nextActionMessages],
}
}
: undefined,
})
}
@@ -167,13 +167,13 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
mousePosition: currentPage?.currentState.mousePosition || latestState.mousePosition || "700,400",
consoleLogs: currentPage?.currentState.consoleLogs,
screenshot: currentPage?.currentState.screenshot || latestState.screenshot,
}
}
: {
url: currentPage?.currentState.url || initialUrl,
mousePosition: currentPage?.currentState.mousePosition || "700,400",
consoleLogs: currentPage?.currentState.consoleLogs,
screenshot: currentPage?.currentState.screenshot,
}
}
const [actionContent, { height: actionHeight }] = useSize(
<div>
@@ -188,7 +188,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
{!isBrowsing && messages.some((m) => m.say === "browser_action_result") && currentPageIndex === 0 && (
<BrowserActionBox action={"launch"} text={initialUrl} />
)}
</div>
</div>,
)
useEffect(() => {
@@ -381,7 +381,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
</div>
</div>
)}
</div>
</div>,
)
// Height change effect

View File

@@ -35,7 +35,7 @@ const ChatRow = memo(
padding: "10px 6px 10px 15px",
}}>
<ChatRowContent {...props} />
</div>
</div>,
)
useEffect(() => {
@@ -55,7 +55,7 @@ const ChatRow = memo(
return chatrow
},
// memo does shallow comparison of props, so we need to do deep comparison of arrays/objects whose properties might change
deepEqual
deepEqual,
)
export default ChatRow
@@ -707,9 +707,7 @@ export const ChatRowContent = ({
padding: `2px 8px ${isExpanded ? 0 : 8}px 8px`,
}}>
<span
className={`codicon codicon-chevron-${
isExpanded ? "down" : "right"
}`}></span>
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}></span>
<span style={{ fontSize: "0.8em" }}>Command Output</span>
</div>
{isExpanded && <CodeBlock source={`${"```"}shell\n${output}\n${"```"}`} />}

View File

@@ -40,7 +40,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
shouldDisableImages,
onHeightChange,
},
ref
ref,
) => {
const { filePaths } = useExtensionState()
const [isTextAreaFocused, setIsTextAreaFocused] = useState(false)
@@ -119,7 +119,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const { newValue, mentionIndex } = insertMention(
textAreaRef.current.value,
cursorPosition,
insertValue
insertValue,
)
setInputValue(newValue)
@@ -137,7 +137,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
}, 0)
}
},
[setInputValue, cursorPosition]
[setInputValue, cursorPosition],
)
const handleKeyDown = useCallback(
@@ -163,14 +163,14 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const selectableOptions = options.filter(
(option) =>
option.type !== ContextMenuOptionType.URL &&
option.type !== ContextMenuOptionType.NoResults
option.type !== ContextMenuOptionType.NoResults,
)
if (selectableOptions.length === 0) return -1 // No selectable options
// Find the index of the next selectable option
const currentSelectableIndex = selectableOptions.findIndex(
(option) => option === options[prevIndex]
(option) => option === options[prevIndex],
)
const newSelectableIndex =
@@ -252,7 +252,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
setInputValue,
justDeletedSpaceAfterMention,
queryItems,
]
],
)
useLayoutEffect(() => {
@@ -285,7 +285,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
setSelectedMenuIndex(-1)
}
},
[setInputValue]
[setInputValue],
)
useEffect(() => {
@@ -370,7 +370,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
}
}
},
[shouldDisableImages, setSelectedImages, cursorPosition, setInputValue, inputValue]
[shouldDisableImages, setSelectedImages, cursorPosition, setInputValue, inputValue],
)
const handleThumbnailsHeightChange = useCallback((height: number) => {
@@ -394,7 +394,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
highlightLayerRef.current.innerHTML = text
.replace(/\n$/, "\n\n")
.replace(/[<>&]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" }[c] || c))
.replace(/[<>&]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" })[c] || c)
.replace(mentionRegexGlobal, '<mark class="mention-context-textarea-highlight">$&</mark>')
highlightLayerRef.current.scrollTop = textAreaRef.current.scrollTop
@@ -417,7 +417,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
updateCursorPosition()
}
},
[updateCursorPosition]
[updateCursorPosition],
)
return (
@@ -594,7 +594,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
</div>
</div>
)
}
},
)
export default ChatTextArea

View File

@@ -271,7 +271,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
disableAutoScrollRef.current = false
}
},
[messages.length, clineAsk]
[messages.length, clineAsk],
)
const startNewTask = useCallback(() => {
@@ -365,7 +365,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
const newImages = message.images ?? []
if (newImages.length > 0) {
setSelectedImages((prevImages) =>
[...prevImages, ...newImages].slice(0, MAX_IMAGES_PER_MESSAGE)
[...prevImages, ...newImages].slice(0, MAX_IMAGES_PER_MESSAGE),
)
}
break
@@ -391,7 +391,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
handleSendMessage,
handlePrimaryButtonClick,
handleSecondaryButtonClick,
]
],
)
useEvent("message", handleMessage)
@@ -529,9 +529,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
})
},
10,
{ immediate: true }
{ immediate: true },
),
[]
[],
)
const scrollToBottomAuto = useCallback(() => {
@@ -593,7 +593,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
}
}
},
[groupedMessages, expandedRows, scrollToBottomAuto, isAtBottom]
[groupedMessages, expandedRows, scrollToBottomAuto, isAtBottom],
)
const handleRowHeightChange = useCallback(
@@ -608,7 +608,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
}
}
},
[scrollToBottomSmooth, scrollToBottomAuto]
[scrollToBottomSmooth, scrollToBottomAuto],
)
useEffect(() => {
@@ -671,7 +671,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
/>
)
},
[expandedRows, modifiedMessages, groupedMessages.length, toggleRowExpansion, handleRowHeightChange]
[expandedRows, modifiedMessages, groupedMessages.length, toggleRowExpansion, handleRowHeightChange],
)
return (

View File

@@ -25,7 +25,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
const filteredOptions = useMemo(
() => getContextMenuOptions(searchQuery, selectedType, queryItems),
[searchQuery, selectedType, queryItems]
[searchQuery, selectedType, queryItems],
)
useEffect(() => {

View File

@@ -35,7 +35,7 @@ const CodeAccordian = ({
}: CodeAccordianProps) => {
const inferredLanguage = useMemo(
() => code && (language ?? (path ? getLanguageFromPath(path) : undefined)),
[path, language, code]
[path, language, code],
)
return (

View File

@@ -69,8 +69,19 @@ const StyledMarkdown = styled.div<{ forceWrap: boolean }>`
}
background-color: ${CODE_BLOCK_BG_COLOR};
font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family:
var(--vscode-font-family),
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
font-size: var(--vscode-editor-font-size, var(--vscode-font-size, 12px));
color: var(--vscode-editor-foreground, #fff);

View File

@@ -1,24 +1,23 @@
import {
VSCodeBadge,
VSCodeButton,
VSCodeCheckbox,
VSCodeDataGrid,
VSCodeDataGridCell,
VSCodeDataGridRow,
VSCodeDivider,
VSCodeDropdown,
VSCodeLink,
VSCodeOption,
VSCodePanels,
VSCodePanelTab,
VSCodePanelView,
VSCodeProgressRing,
VSCodeRadio,
VSCodeRadioGroup,
VSCodeTag,
VSCodeTextArea,
VSCodeTextField,
VSCodeBadge,
VSCodeButton,
VSCodeCheckbox,
VSCodeDataGrid,
VSCodeDataGridCell,
VSCodeDataGridRow,
VSCodeDivider,
VSCodeDropdown,
VSCodeLink,
VSCodeOption,
VSCodePanels,
VSCodePanelTab,
VSCodePanelView,
VSCodeProgressRing,
VSCodeRadio,
VSCodeRadioGroup,
VSCodeTag,
VSCodeTextArea,
VSCodeTextField,
} from "@vscode/webview-ui-toolkit/react"
function Demo() {
@@ -81,7 +80,7 @@ function Demo() {
))}
</VSCodeDataGrid>
<VSCodeTextField>
<VSCodeTextField>
<section slot="end" style={{ display: "flex", alignItems: "center" }}>
<VSCodeButton appearance="icon" aria-label="Match Case">
<span className="codicon codicon-case-sensitive"></span>

View File

@@ -57,8 +57,19 @@ const StyledMarkdown = styled.div`
overflow-wrap: anywhere;
}
font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family:
var(--vscode-font-family),
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
font-size: var(--vscode-font-size, 13px);
p,

View File

@@ -430,7 +430,7 @@ const ExportButton = ({ itemId }: { itemId: string }) => (
// https://gist.github.com/evenfrost/1ba123656ded32fb7a0cd4651efd4db0
export const highlight = (
fuseSearchResult: FuseResult<any>[],
highlightClassName: string = "history-item-highlight"
highlightClassName: string = "history-item-highlight",
) => {
const set = (obj: Record<string, any>, path: string, value: any) => {
const pathValue = path.split(".")

View File

@@ -266,8 +266,19 @@ const DropdownItem = styled.div<{ isSelected: boolean }>`
// Markdown
const StyledMarkdown = styled.div`
font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family:
var(--vscode-font-family),
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
font-size: 12px;
color: var(--vscode-descriptionForeground);
@@ -403,5 +414,5 @@ export const ModelDescriptionMarkdown = memo(
)} */}
</StyledMarkdown>
)
}
},
)

View File

@@ -57,7 +57,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
config.lmStudioModelId,
config.geminiApiKey,
config.openAiNativeApiKey,
].some((key) => key !== undefined)
].some((key) => key !== undefined)
: false
setShowWelcome(!hasKey)
setDidHydrateState(true)

View File

@@ -9,7 +9,7 @@ const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
</React.StrictMode>,
)
// If you want to start measuring performance in your app, pass a function

View File

@@ -3,7 +3,7 @@ import { mentionRegex } from "../../../src/shared/context-mentions"
export function insertMention(
text: string,
position: number,
value: string
value: string,
): { newValue: string; mentionIndex: number } {
const beforeCursor = text.slice(0, position)
const afterCursor = text.slice(position)
@@ -62,7 +62,7 @@ export interface ContextMenuQueryItem {
export function getContextMenuOptions(
query: string,
selectedType: ContextMenuOptionType | null = null,
queryItems: ContextMenuQueryItem[]
queryItems: ContextMenuQueryItem[],
): ContextMenuQueryItem[] {
if (query === "") {
if (selectedType === ContextMenuOptionType.File) {

View File

@@ -100,7 +100,7 @@ function fallbackTheme() {
".hljs-string": "#a31515",
".hljs-meta .hljs-string": "#a31515",
".hljs-params": "#001080",
}
}
: {
".hljs-comment": "#6A9955",
".hljs-doctag": "#569cd6",
@@ -128,7 +128,7 @@ function fallbackTheme() {
".hljs-string": "#ce9178",
".hljs-meta .hljs-string": "#ce9178",
".hljs-params": "#9CDCFE",
}
}
}
export function convertTextMateToHljs(fullColorTheme: any) {

View File

@@ -59,7 +59,7 @@ export function validateApiConfiguration(apiConfiguration?: ApiConfiguration): s
export function validateModelId(
apiConfiguration?: ApiConfiguration,
openRouterModels?: Record<string, ModelInfo>
openRouterModels?: Record<string, ModelInfo>,
): string | undefined {
if (apiConfiguration) {
switch (apiConfiguration.apiProvider) {