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>
2025-12-20 04:11:10 -05:00 · 2024-11-21 13:13:54 -08:00
parent 8d7e28c5e3
commit 93e70c62f1
65 changed files with 2101 additions and 2091 deletions
--- a/webview-ui/src/components/chat/BrowserSessionRow.tsx
+++ b/webview-ui/src/components/chat/BrowserSessionRow.tsx
@@ -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
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -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${"```"}`} />}
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -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
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -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 (
--- a/webview-ui/src/components/chat/ContextMenu.tsx
+++ b/webview-ui/src/components/chat/ContextMenu.tsx
@@ -25,7 +25,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({

 	const filteredOptions = useMemo(
 		() => getContextMenuOptions(searchQuery, selectedType, queryItems),
-		[searchQuery, selectedType, queryItems]
+		[searchQuery, selectedType, queryItems],
 	)

 	useEffect(() => {
--- a/webview-ui/src/components/common/CodeAccordian.tsx
+++ b/webview-ui/src/components/common/CodeAccordian.tsx
@@ -35,7 +35,7 @@ const CodeAccordian = ({
 }: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(
 		() => code && (language ?? (path ? getLanguageFromPath(path) : undefined)),
-		[path, language, code]
+		[path, language, code],
 	)

 	return (
--- a/webview-ui/src/components/common/CodeBlock.tsx
+++ b/webview-ui/src/components/common/CodeBlock.tsx
@@ -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);

--- a/webview-ui/src/components/common/Demo.tsx
+++ b/webview-ui/src/components/common/Demo.tsx
@@ -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>
--- a/webview-ui/src/components/common/MarkdownBlock.tsx
+++ b/webview-ui/src/components/common/MarkdownBlock.tsx
@@ -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,
--- a/webview-ui/src/components/history/HistoryView.tsx
+++ b/webview-ui/src/components/history/HistoryView.tsx
@@ -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(".")
--- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
+++ b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
@@ -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>
 		)
-	}
+	},
 )