feat: redesign chat UI

src/copilot-chat/components/Chat.tsx

@@ -18,6 +18,8 @@ const Chat: React.FC = () => {
 		conversations,
 		activeConversationId,
 		initConversationService,
+		deleteMessage,
+		retryMessage,
 	} = useCopilotStore();
 
 	useEffect(() => {
@@ -28,25 +30,66 @@ const Chat: React.FC = () => {
 
 	const displayMessages = activeConversationId
 		? conversations.find((conv) => conv.id === activeConversationId)
-				?.messages || []
+			?.messages || []
 		: messages;
 
 	const formattedMessages: MessageProps[] = displayMessages.map(
 		(message) => ({
+			messageId: message.id,
 			icon: message.role === "assistant" ? copilotIcon : userIcon,
 			name: message.role === "assistant" ? "GitHub Copilot" : "User",
 			message: message.content,
 			linkedNotes: message.linkedNotes,
 		}),
 	);
 
+	// Handlers for message actions
+	const handleCopy: (id?: string | number, content?: string) => void = (
+		id,
+		content,
+	) => {
+		/* No changes needed here */
+	};
+
+	const handleDelete: (id?: string | number) => void = (id) => {
+		if (typeof id === "string") {
+			deleteMessage(plugin, id);
+		} else if (typeof id === "number") {
+			const conv = activeConversationId
+				? conversations.find((c) => c.id === activeConversationId)
+				: undefined;
+			const list = conv ? conv.messages : messages;
+			const msg = list[id ?? -1];
+			if (msg) deleteMessage(plugin, msg.id);
+		}
+	};
+
+	const handleRetry: (id?: string | number) => void = (id) => {
+		if (typeof id === "string") {
+			retryMessage(plugin, id);
+		} else if (typeof id === "number") {
+			const conv = activeConversationId
+				? conversations.find((c) => c.id === activeConversationId)
+				: undefined;
+			const list = conv ? conv.messages : messages;
+			const msg = list[id ?? -1];
+			if (msg) retryMessage(plugin, msg.id);
+		}
+	};
+
 	return (
 		<MainLayout>
 			<Header />
 			{formattedMessages.length === 0 ? (
 				<NoHistory />
 			) : (
-				<MessageList messages={formattedMessages} />
+				<MessageList
+					messages={formattedMessages}
+					isLoading={isLoading}
+					onCopy={handleCopy}
+					onDelete={handleDelete}
+					onRetry={handleRetry}
+				/>
 			)}
 			<Input isLoading={isLoading} />
 		</MainLayout>

src/copilot-chat/components/atoms/FileSuggestion.tsx

@@ -7,7 +7,7 @@ const BASE_CLASSNAME = "copilot-chat-file-suggestion";
 
 interface FileSuggestionProps {
 	query: string;
-	position: { top: number; left: number };
+	position?: { top: number; left: number };
 	onSelect: (file: { path: string; filename: string }) => void;
 	onClose: () => void;
 	plugin: CopilotPlugin | undefined;
@@ -48,7 +48,7 @@ const FileSuggestion: React.FC<FileSuggestionProps> = ({
 			setSelectedIndex(
 				(prev) => (prev - 1 + files.length) % files.length,
 			);
-		} else if (e.key === "Enter") {
+		} else if (e.key === "Enter" || e.key === "Tab") {
 			e.preventDefault();
 			if (files[selectedIndex]) {
 				handleSelect(files[selectedIndex]);
@@ -86,29 +86,17 @@ const FileSuggestion: React.FC<FileSuggestionProps> = ({
 	};
 
 	const getDirectory = (path: string) => {
-		const lastSlashIndex = path.lastIndexOf("/");
-		if (lastSlashIndex === -1) return "";
-		return path.substring(0, lastSlashIndex);
+		// Normalize path by trimming leading/trailing slashes
+		const normalized = (path || "").replace(/^\/+|\/+$/g, "");
+		const parts = normalized.split("/").filter(Boolean);
+		// If no folder part, it's root
+		if (parts.length <= 1) return "";
+		// Join folder parts and ensure a leading slash
+		return "/" + parts.slice(0, -1).join("/");
 	};
 
 	return (
-		<div
-			className={concat(BASE_CLASSNAME, "container")}
-			style={{
-				position: "absolute",
-				top: `-200px`,
-				left: `10px`,
-				width: "calc(100% - 20px)",
-				maxHeight: "200px",
-				overflowY: "auto",
-				zIndex: 1000,
-				backgroundColor: "var(--background-primary)",
-				border: "1px solid var(--background-modifier-border)",
-				borderRadius: "4px",
-				boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.1)",
-			}}
-			ref={containerRef}
-		>
+		<div className={concat(BASE_CLASSNAME, "container")} ref={containerRef}>
 			{files.length === 0 ? (
 				<div
 					className={concat(BASE_CLASSNAME, "no-results")}
@@ -117,47 +105,25 @@ const FileSuggestion: React.FC<FileSuggestionProps> = ({
 					No files found
 				</div>
 			) : (
-				<div className={concat(BASE_CLASSNAME, "list")}>
-					{files.map((file, index) => (
-						<div
-							key={file.path}
-							className={cx(
-								concat(BASE_CLASSNAME, "item"),
-								index === selectedIndex
-									? concat(BASE_CLASSNAME, "item-selected")
-									: "",
-							)}
-							onClick={() => handleSelect(file)}
-							style={{
-								padding: "8px 10px",
-								cursor: "pointer",
-								borderBottom:
-									"1px solid var(--background-modifier-border)",
-								backgroundColor:
-									index === selectedIndex
-										? "var(--background-secondary)"
-										: "transparent",
-								display: "flex",
-								flexDirection: "column",
-							}}
-						>
-							<div style={{ fontWeight: "500" }}>
-								{file.basename}
-							</div>
-							{getDirectory(file.path) && (
-								<div
-									style={{
-										fontSize: "0.8em",
-										color: "var(--text-muted)",
-										marginTop: "2px",
-									}}
-								>
-									{getDirectory(file.path)}
-								</div>
-							)}
+				files.map((file, index) => (
+					<div
+						key={file.path}
+						className={cx(
+							concat(BASE_CLASSNAME, "item"),
+							index === selectedIndex
+								? concat(BASE_CLASSNAME, "item-selected")
+								: "",
+						)}
+						onClick={() => handleSelect(file)}
+					>
+						<div className={concat(BASE_CLASSNAME, "item-name")}>
+							{file.basename}
 						</div>
-					))}
-				</div>
+						<div className={concat(BASE_CLASSNAME, "item-path")}>
+							{getDirectory(file.path)}
+						</div>
+					</div>
+				))
 			)}
 		</div>
 	);

src/copilot-chat/components/atoms/LinkedNotes.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { cx } from "../../../utils/style";
+import { usePlugin } from "../../hooks/usePlugin";
+import { TFile, Notice } from "obsidian";
+
+const BASE_CLASSNAME = "copilot-chat-message";
+
+export interface LinkedNoteItem {
+	path: string;
+	filename: string;
+	content: string;
+}
+
+interface LinkedNotesProps {
+	notes?: LinkedNoteItem[];
+}
+
+const LinkedNotes: React.FC<LinkedNotesProps> = ({ notes }) => {
+	const plugin = usePlugin();
+
+	if (!notes || notes.length === 0) return null;
+
+	const openLinkedNote = (note: { path: string; filename: string }) => {
+		if (!plugin) return;
+		try {
+			const file = plugin.app.vault.getAbstractFileByPath(note.path);
+			if (file instanceof TFile) {
+				// If already open in any leaf, activate that leaf
+				const leaves = plugin.app.workspace.getLeavesOfType("markdown");
+				const existing = leaves.find((leaf) => {
+					type ViewWithFile = { file?: { path?: string } };
+					const view = leaf.view as unknown as ViewWithFile;
+					return view?.file?.path === file.path;
+				});
+				if (existing) {
+					plugin.app.workspace.revealLeaf(existing);
+					return;
+				}
+
+				// Otherwise open in a new leaf
+				plugin.app.workspace
+					.getLeaf(true)
+					.openFile(file)
+					.catch((e) => {
+						console.error("Failed to open file", e);
+						new Notice("Unable to open file: " + note.filename);
+					});
+			} else {
+				plugin.app.workspace.openLinkText(note.filename, "", false);
+			}
+		} catch (e) {
+			console.error("Open note error", e);
+			new Notice("Failed to open note: " + note.filename);
+		}
+	};
+
+	return (
+		<div className={`${BASE_CLASSNAME}-linked-notes-list`}>
+			{notes.map((note, index) => (
+				<div
+					key={index}
+					className={cx(`${BASE_CLASSNAME}-linked-note`, "tag")}
+					role="button"
+					tabIndex={0}
+					onClick={() => openLinkedNote(note)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							openLinkedNote(note);
+						}
+					}}
+					aria-label={`Open note ${note.filename}`}
+				>
+					{note.filename}
+				</div>
+			))}
+		</div>
+	);
+};
+
+export { LinkedNotes };