From e5c55145e97e591e3fd99b7d83638b9bda634c84 Mon Sep 17 00:00:00 2001
From: Andrew <andrewpareles@gmail.com>
Date: Fri, 11 Oct 2024 23:18:23 -0700
Subject: [PATCH] update selectedFiles display

---
 extensions/void/src/sidebar/Sidebar.tsx       | 10 ++--
 .../src/sidebar/components/SelectedFiles.tsx  | 47 ++++---------------
 2 files changed, 12 insertions(+), 45 deletions(-)

diff --git a/extensions/void/src/sidebar/Sidebar.tsx b/extensions/void/src/sidebar/Sidebar.tsx
index c1dabe73..b8099733 100644
--- a/extensions/void/src/sidebar/Sidebar.tsx
+++ b/extensions/void/src/sidebar/Sidebar.tsx
@@ -8,7 +8,7 @@ import MarkdownRender from "./markdown/MarkdownRender";
 import BlockCode from "./markdown/BlockCode";
 
 import * as vscode from 'vscode'
-import { FilesSelector, SelectedFiles } from "./components/SelectedFiles";
+import { SelectedFiles } from "./components/SelectedFiles";
 import { useChat } from "./chatContext";
 
 
@@ -50,7 +50,7 @@ const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
 
 	if (role === 'user') {
 		chatbubbleContents = <>
-			<SelectedFiles files={chatMessage.files} />
+			<SelectedFiles files={chatMessage.files} setFiles={null} />
 			{chatMessage.selection?.selectionStr && <BlockCode text={chatMessage.selection.selectionStr} hideToolbar />}
 			{children}
 		</>
@@ -251,17 +251,13 @@ const Sidebar = () => {
 			<div className="shrink-0 py-4">
 				{/* selection */}
 				<div className="text-left">
-					{/* selected files */}
-					<FilesSelector files={files} setFiles={setFiles} />
-					{/* selected code */}
-
 
 					<div className="relative">
 						<div className="input">
 							{/* selection */}
 							{(files.length || selection?.selectionStr) && <div className="p-2 pb-0 space-y-2">
 								{/* selected files */}
-								<FilesSelector files={files} setFiles={setFiles} />
+								<SelectedFiles files={files} setFiles={setFiles} />
 								{/* selected code */}
 								{!!selection?.selectionStr && (
 									<BlockCode className="rounded bg-vscode-sidebar-bg" text={selection.selectionStr} toolbar={(
diff --git a/extensions/void/src/sidebar/components/SelectedFiles.tsx b/extensions/void/src/sidebar/components/SelectedFiles.tsx
index c4b53590..0d5b478e 100644
--- a/extensions/void/src/sidebar/components/SelectedFiles.tsx
+++ b/extensions/void/src/sidebar/components/SelectedFiles.tsx
@@ -8,28 +8,22 @@ const getBasename = (pathStr: string) => {
 	return parts[parts.length - 1]
 }
 
-export const FilesSelector = ({
-	files,
-	setFiles,
-}: {
-	files: vscode.Uri[]
-	setFiles: (files: vscode.Uri[]) => void
-}) => {
-	const onRemove = (index: number) => () =>
-		setFiles([...files.slice(0, index), ...files.slice(index + 1, Infinity)])
-
+export const SelectedFiles = ({ files, setFiles, }: { files: vscode.Uri[], setFiles: null | ((files: vscode.Uri[]) => void) }) => {
 	return (
 		files.length !== 0 && (
 			<div className="flex flex-wrap -mx-1 -mb-1">
 				{files.map((filename, i) => (
 					<button
 						key={filename.path}
-						className="btn btn-secondary btn-sm border border-vscode-input-border rounded flex items-center space-x-2 mx-1 mb-1"
+						disabled={!setFiles}
+						className={`btn btn-secondary btn-sm border border-vscode-input-border rounded flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default`}
 						type="button"
-						onClick={onRemove(i)}
+						onClick={() => setFiles?.([...files.slice(0, i), ...files.slice(i + 1, Infinity)])}
 					>
 						<span>{getBasename(filename.fsPath)}</span>
-						<span className="">
+
+						{/* X button */}
+						{!!setFiles && <span className="">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
@@ -43,7 +37,7 @@ export const FilesSelector = ({
 									d="M6 18 18 6M6 6l12 12"
 								/>
 							</svg>
-						</span>
+						</span>}
 					</button>
 				))}
 			</div>
@@ -51,27 +45,4 @@ export const FilesSelector = ({
 	)
 }
 
-export const SelectedFiles = ({ files }: { files: vscode.Uri[] }) => {
-	return (
-		files.length !== 0 && (
-			<div className="text-xs my-2">
-				{files.map((filename, i) => (
-					<div key={i} className="flex">
-						<button
-							type="button"
-							className="btn btn-secondary pointer-events-none"
-							onClick={() => {
-								// TODO redirect to the document filename.fsPath, when add this remove pointer-events-none
-							}}
-						>
-							-{" "}
-							<span className="text-gray-100">
-								{getBasename(filename.fsPath)}
-							</span>
-						</button>
-					</div>
-				))}
-			</div>
-		)
-	)
-}
+