@@ -94,7 +109,7 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
direction: "rtl",
textAlign: "left",
}}>
- {path}
+ {removeLeadingNonAlphanumeric(path) + "\u200E"}
setIsExpanded(!isExpanded)}>
@@ -111,12 +126,14 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
}}>
${extensionToLanguage[extension]}`)
+ return extensionToLanguage[extension]
+}
diff --git a/webview-ui/src/utilities/mockMessages.ts b/webview-ui/src/utilities/mockMessages.ts
new file mode 100644
index 0000000..61e7d79
--- /dev/null
+++ b/webview-ui/src/utilities/mockMessages.ts
@@ -0,0 +1,316 @@
+import { ClaudeMessage } from "@shared/ExtensionMessage";
+
+export const mockMessages: ClaudeMessage[] = [
+ {
+ ts: Date.now() - 3600000,
+ type: "say",
+ say: "task",
+ text: "Create a React component for a todo list application",
+ },
+ {
+ ts: Date.now() - 3500000,
+ type: "say",
+ say: "api_req_started",
+ text: JSON.stringify({
+ request: {
+ text: "Create a React component for a todo list application",
+ type: "text",
+ },
+ tokensIn: 10,
+ tokensOut: 250,
+ cost: 0.0002,
+ }),
+ },
+ {
+ ts: Date.now() - 3300000,
+ type: "say",
+ say: "text",
+ text: "Here's a basic React component for a todo list application:",
+ },
+ {
+ ts: Date.now() - 3200000,
+ type: "say",
+ say: "tool",
+ text: JSON.stringify({
+ tool: "newFileCreated",
+ path: "/src/components/TodoList.tsx",
+ content: `import React, { useState } from 'react';
+
+ interface Todo {
+ id: number;
+ text: string;
+ completed: boolean;
+ }
+
+ const TodoList: React.FC = () => {
+ const [todos, setTodos] = useState([]);
+ const [inputValue, setInputValue] = useState('');
+
+ const addTodo = () => {
+ if (inputValue.trim() !== '') {
+ setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
+ setInputValue('');
+ }
+ };
+
+ const toggleTodo = (id: number) => {
+ setTodos(todos.map(todo =>
+ todo.id === id ? { ...todo, completed: !todo.completed } : todo
+ ));
+ };
+
+ return (
+
+
Todo List
+
setInputValue(e.target.value)}
+ placeholder="Add a new todo"
+ />
+
+
+ {todos.map(todo => (
+ - toggleTodo(todo.id)}
+ style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
+ >
+ {todo.text}
+
+ ))}
+
+