From ac9bc80e2098651876d64a7a68b8bb764e665da9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aneta=20Jastrz=C4=99bska?=
 <1544710+anetaj@users.noreply.github.com>
Date: Sat, 21 Sep 2024 15:01:49 +0200
Subject: [PATCH] style included files list

---
 extensions/void/src/sidebar/Sidebar.tsx       | 160 +++++++-----------
 .../void/src/sidebar/components/Files.tsx     |  77 +++++++++
 2 files changed, 138 insertions(+), 99 deletions(-)
 create mode 100644 extensions/void/src/sidebar/components/Files.tsx

diff --git a/extensions/void/src/sidebar/Sidebar.tsx b/extensions/void/src/sidebar/Sidebar.tsx
index 04ed3020..1aefaf47 100644
--- a/extensions/void/src/sidebar/Sidebar.tsx
+++ b/extensions/void/src/sidebar/Sidebar.tsx
@@ -1,12 +1,13 @@
-import React, { useState, ChangeEvent, useEffect, useRef, useCallback, FormEvent } from "react"
-import { ApiConfig, LLMMessage, sendLLMMessage } from "../common/sendLLMMessage"
-import { Command, File, Selection, WebviewMessage } from "../shared_types"
+import React, { useState, useEffect, useRef, useCallback, FormEvent } from "react"
+import { ApiConfig, sendLLMMessage } from "../common/sendLLMMessage"
+import { File, Selection, WebviewMessage } from "../shared_types"
 import { awaitVSCodeResponse, getVSCodeAPI, resolveAwaitingVSCodeResponse } from "./getVscodeApi"
 
 import { marked } from 'marked';
 import { MarkdownRender, BlockCode } from "./MarkdownRender";
 
 import * as vscode from 'vscode'
+import { FilesSelector, IncludedFiles } from "./components/Files";
 
 
 const filesStr = (fullFiles: File[]) => {
@@ -35,40 +36,6 @@ If you make a change, rewrite the entire file.
 }
 
 
-const FilesSelector = ({ files, setFiles }: { files: vscode.Uri[], setFiles: (files: vscode.Uri[]) => void }) => {
-	return files.length !== 0 && <div className='my-2'>
-		Include files:
-		{files.map((filename, i) =>
-			<div key={i} className='flex'>
-				{/* X button on a file */}
-				<button type='button' onClick={() => {
-					let file_index = files.indexOf(filename)
-					setFiles([...files.slice(0, file_index), ...files.slice(file_index + 1, Infinity)])
-				}}>
-					-{' '}<span className='text-gray-500'>{getBasename(filename.fsPath)}</span>
-				</button>
-			</div>
-		)}
-	</div>
-}
-
-const IncludedFiles = ({ 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>
-}
-
-
 const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
 
 	const role = chatMessage.role
@@ -99,13 +66,6 @@ const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
 	</div>
 }
 
-const getBasename = (pathStr: string) => {
-	// "unixify" path
-	pathStr = pathStr.replace(/[/\\]+/g, '/'); // replace any / or \ or \\ with /
-	const parts = pathStr.split('/') // split on /
-	return parts[parts.length - 1]
-}
-
 type ChatMessage = {
 	role: 'user'
 	content: string, // content sent to the llm
@@ -258,62 +218,64 @@ const Sidebar = () => {
 			</div>
 			{/* chatbar */}
 			<div className="shrink-0 py-4">
-				{/* selection */}
-				<div className="text-left">
-					{/* selected files */}
-					<FilesSelector files={files} setFiles={setFiles} />
-					{/* selected code */}
-					{!selection?.selectionStr ? null
-						: (
-							<div className="relative">
-								<button 
-									onClick={clearSelection}
-									className="absolute top-2 right-2 text-white hover:text-gray-300 z-10"
-								>
-									X
-								</button>
-								<BlockCode text={selection.selectionStr} hideToolbar />
-							</div>
-					)}
+				<div className="input">
+					{/* selection */}
+					<div className="text-left">
+						{/* selected files */}
+						<FilesSelector files={files} setFiles={setFiles} />
+						{/* selected code */}
+						{!selection?.selectionStr ? null
+							: (
+								<div className="relative">
+									<button 
+										onClick={clearSelection}
+										className="absolute top-2 right-2 text-white hover:text-gray-300 z-10"
+									>
+										X
+									</button>
+									<BlockCode text={selection.selectionStr} hideToolbar />
+								</div>
+						)}
+					</div>
+					<form
+						ref={formRef}
+						className="flex flex-row items-center rounded-md p-2"
+						onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) onSubmit(e) }}
+
+						onSubmit={(e) => {
+							console.log('submit!')
+							e.preventDefault();
+							onSubmit(e)
+						}}>
+						{/* input */}
+
+						<textarea
+							onChange={(e) => { setInstructions(e.target.value) }}
+							className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden bg-transparent border-none !outline-none"
+							placeholder="Ctrl+L to select"
+							rows={1}
+							onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
+						/>
+						{/* submit button */}
+						{isLoading ?
+							<button
+								onClick={onStop}
+								className="btn btn-primary rounded-r-lg max-h-10 p-2"
+								type='button'
+							>Stop</button>
+							: <button
+								className="btn btn-primary font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
+								disabled={!instructions}
+								type='submit'
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+									<line x1="12" y1="19" x2="12" y2="5"></line>
+									<polyline points="5 12 12 5 19 12"></polyline>
+								</svg>
+							</button>
+						}
+					</form>
 				</div>
-				<form
-					ref={formRef}
-					className="flex flex-row items-center rounded-md p-2 input"
-					onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) onSubmit(e) }}
-
-					onSubmit={(e) => {
-						console.log('submit!')
-						e.preventDefault();
-						onSubmit(e)
-					}}>
-					{/* input */}
-
-					<textarea
-						onChange={(e) => { setInstructions(e.target.value) }}
-						className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden bg-transparent border-none !outline-none"
-						placeholder="Ctrl+L to select"
-						rows={1}
-						onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
-					/>
-					{/* submit button */}
-					{isLoading ?
-						<button
-							onClick={onStop}
-							className="btn btn-primary rounded-r-lg max-h-10 p-2"
-							type='button'
-						>Stop</button>
-						: <button
-							className="btn btn-primary font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
-							disabled={!instructions}
-							type='submit'
-						>
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-								<line x1="12" y1="19" x2="12" y2="5"></line>
-								<polyline points="5 12 12 5 19 12"></polyline>
-							</svg>
-						</button>
-					}
-				</form>
 			</div>
 		</div>
 
diff --git a/extensions/void/src/sidebar/components/Files.tsx b/extensions/void/src/sidebar/components/Files.tsx
new file mode 100644
index 00000000..64e4f7fa
--- /dev/null
+++ b/extensions/void/src/sidebar/components/Files.tsx
@@ -0,0 +1,77 @@
+import React from "react"
+import * as vscode from "vscode"
+
+const getBasename = (pathStr: string) => {
+	// "unixify" path
+	pathStr = pathStr.replace(/[/\\]+/g, "/") // replace any / or \ or \\ with /
+	const parts = pathStr.split("/") // split on /
+	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)])
+
+	return (
+		files.length !== 0 && (
+			<div className="flex flex-wrap p-2 pb-0 -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"
+						type="button"
+						onClick={onRemove(i)}
+					>
+						<span>{getBasename(filename.fsPath)}</span>
+						<span className="">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								className="size-4"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M6 18 18 6M6 6l12 12"
+								/>
+							</svg>
+						</span>
+					</button>
+				))}
+			</div>
+		)
+	)
+}
+
+export const IncludedFiles = ({ 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>
+		)
+	)
+}