Fix/loading enhancing

.changeset/quiet-boxes-smoke.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": minor
+---
+
+Redesign chat window, update start screen, fix chat disabling, add Storybook stories.

webview-ui/.storybook/main.ts

@@ -2,10 +2,23 @@ import type { StorybookConfig } from "@storybook/react-vite"
 
 const config: StorybookConfig = {
 	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-	addons: ["@storybook/addon-essentials", "storybook-dark-mode"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+		"storybook-dark-mode",
+		"storybook-vscode-component/register",
+	],
 	framework: {
 		name: "@storybook/react-vite",
 		options: {},
 	},
+	docs: {
+		autodocs: "tag",
+	},
+	core: {
+		builder: "@storybook/builder-vite",
+	},
 }
+
 export default config

webview-ui/.storybook/preview-context.tsx

@@ -0,0 +1,175 @@
+import { ExtensionStateContextType, ExtensionStateContext } from "../src/context/ExtensionStateContext"
+import { McpServer } from "../../src/shared/mcp"
+import { ApiConfiguration, ModelInfo } from "../../src/shared/api"
+import { HistoryItem } from "../../src/shared/HistoryItem" // Import HistoryItem
+import { useContext } from "react"
+
+// Mock ModelInfo
+const mockModelInfo: ModelInfo = {
+	contextWindow: 2048,
+	supportsImages: true,
+	supportsPromptCache: true,
+	reasoningEffort: "low",
+}
+
+// Mock API configuration
+const mockApiConfig: ApiConfiguration = {
+	apiModelId: "mock-model",
+	glamaModelInfo: mockModelInfo,
+}
+
+// Mock MCP server
+const mockMcpServer: McpServer = {
+	name: "mock-server",
+	tools: [],
+	resources: [],
+	resourceTemplates: [],
+	disabled: false,
+	config: "?",
+	status: "disconnected",
+}
+
+// Mock task history item (Corrected to match HistoryItem type)
+const mockTaskHistoryItem: HistoryItem = {
+	id: "mock-task-id",
+	ts: Date.now(),
+	task: "Sample task",
+	tokensIn: 100,
+	tokensOut: 200,
+	totalCost: 0.5,
+}
+
+// Mock file paths and opened tabs (more realistic mock data)
+const mockFilePaths: string[] = [
+	"/Roo-Code/src/components/chat/ChatTextArea.tsx",
+	"/Roo-Code/src/components/common/CodeBlock.tsx",
+	"/Roo-Code/webview-ui/.storybook/preview-context.tsx",
+]
+const mockOpenedTabs: Array<{ label: string; isActive: boolean; path?: string }> = [
+	{ label: "ChatTextArea.tsx", isActive: true, path: "/Roo-Code/src/components/chat/ChatTextArea.tsx" },
+	{ label: "CodeBlock.tsx", isActive: false, path: "/Roo-Code/src/components/common/CodeBlock.tsx" },
+]
+
+const defaultContext: ExtensionStateContextType = {
+	// Version and state
+	version: "1.0.0",
+	didHydrateState: true,
+	showWelcome: false,
+
+	// Messages and history
+	clineMessages: [],
+	taskHistory: [mockTaskHistoryItem],
+	shouldShowAnnouncement: false,
+
+	// API and models
+	apiConfiguration: mockApiConfig,
+	glamaModels: {},
+	requestyModels: {},
+	openRouterModels: {},
+	unboundModels: {},
+	openAiModels: [],
+
+	// MCP
+	mcpServers: [mockMcpServer],
+	mcpEnabled: true,
+	enableMcpServerCreation: true,
+
+	// Files and tabs
+	filePaths: mockFilePaths,
+	openedTabs: mockOpenedTabs,
+	currentCheckpoint: undefined,
+
+	// Settings
+	mode: "code",
+	preferredLanguage: "English",
+	requestDelaySeconds: 0,
+	rateLimitSeconds: 0,
+	writeDelayMs: 0,
+	browserViewportSize: "1200x800",
+	screenshotQuality: 75,
+	terminalOutputLineLimit: 500,
+	fuzzyMatchThreshold: 1.0,
+	maxOpenTabsContext: 20,
+
+	// Features
+	diffEnabled: false,
+	checkpointsEnabled: false,
+	soundEnabled: false,
+	soundVolume: 0.5,
+	autoApprovalEnabled: true,
+
+	// Permissions
+	alwaysAllowBrowser: true,
+	alwaysAllowExecute: true,
+	alwaysAllowMcp: true,
+	alwaysAllowModeSwitch: true,
+	alwaysAllowReadOnly: true,
+	alwaysApproveResubmit: true,
+	alwaysAllowWrite: true,
+	allowedCommands: [],
+
+	// Other state
+	customModePrompts: {},
+	customSupportPrompts: {},
+	experiments: {
+		experimentalDiffStrategy: false,
+		search_and_replace: false,
+		insert_content: false,
+		powerSteering: false,
+	},
+	customModes: [],
+	enhancementApiConfigId: undefined,
+	currentApiConfigName: "default",
+	listApiConfigMeta: [],
+	theme: {},
+
+	// Setters
+	setApiConfiguration: () => {},
+	setCustomInstructions: () => {},
+	setAlwaysAllowReadOnly: () => {},
+	setAlwaysAllowWrite: () => {},
+	setAlwaysAllowExecute: () => {},
+	setAlwaysAllowBrowser: () => {},
+	setAlwaysAllowMcp: () => {},
+	setAlwaysAllowModeSwitch: () => {},
+	setShowAnnouncement: () => {},
+	setAllowedCommands: () => {},
+	setSoundEnabled: () => {},
+	setSoundVolume: () => {},
+	setDiffEnabled: () => {},
+	setCheckpointsEnabled: () => {},
+	setBrowserViewportSize: () => {},
+	setFuzzyMatchThreshold: () => {},
+	setPreferredLanguage: () => {},
+	setWriteDelayMs: () => {},
+	setScreenshotQuality: () => {},
+	setTerminalOutputLineLimit: () => {},
+	setMcpEnabled: () => {},
+	setEnableMcpServerCreation: () => {},
+	setAlwaysApproveResubmit: () => {},
+	setRequestDelaySeconds: () => {},
+	setRateLimitSeconds: () => {},
+	setCurrentApiConfigName: () => {},
+	setListApiConfigMeta: () => {},
+	onUpdateApiConfig: () => {},
+	setMode: () => {},
+	setCustomModePrompts: () => {},
+	setCustomSupportPrompts: () => {},
+	setEnhancementApiConfigId: () => {},
+	setExperimentEnabled: () => {},
+	setAutoApprovalEnabled: () => {},
+	setCustomModes: () => {},
+	setMaxOpenTabsContext: () => {},
+}
+
+export const PreviewExtensionStateContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	console.log("PreviewExtensionStateContextProvider is rendering!") // Re-add console log
+	console.log("Context Value:", defaultContext) // Log context value
+	return <ExtensionStateContext.Provider value={defaultContext}>{children}</ExtensionStateContext.Provider>
+}
+
+export const usePreviewExtensionState = () => {
+	const context = useContext(ExtensionStateContext)
+	console.log("useExtensionState Hook Context:", context) // Log context in hook
+	return context
+}

webview-ui/.storybook/preview.css

@@ -0,0 +1,110 @@
+/* VS Code theme variables */
+:root {
+	/* Base theme */
+	--vscode-foreground: #d1d5da;
+	--vscode-editor-background: #24292e;
+	--vscode-editor-foreground: #e1e4e8;
+
+	/* Input elements */
+	--vscode-input-background: #2f363d;
+	--vscode-input-foreground: #e1e4e8;
+	--vscode-input-border: #1b1f23;
+	--vscode-focusBorder: #005cc5;
+
+	/* Buttons */
+	--vscode-button-background: #176f2c;
+	--vscode-button-foreground: #dcffe4;
+	--vscode-button-hoverBackground: #1177bb;
+	--vscode-button-secondaryBackground: #444d56;
+	--vscode-button-secondaryForeground: #ffffff;
+
+	/* Dropdowns and Lists */
+	--vscode-dropdown-background: #2f363d;
+	--vscode-dropdown-foreground: #e1e4e8;
+	--vscode-dropdown-border: #1b1f23;
+	--vscode-list-hoverBackground: #282e34;
+	--vscode-list-hoverForeground: #e1e4e8;
+	--vscode-list-focusBackground: #044289;
+
+	/* Badges and Notifications */
+	--vscode-badge-background: #044289;
+	--vscode-badge-foreground: #c8e1ff;
+	--vscode-notifications-background: #2f363d;
+	--vscode-notifications-foreground: #e1e4e8;
+	--vscode-notifications-border: #1b1f23;
+
+	/* Editor elements */
+	--vscode-editorGroup-border: #444444;
+	--vscode-diffEditor-insertedTextBackground: #37373d;
+	--vscode-diffEditor-removedTextBackground: #3c1f1f;
+	--vscode-textCodeBlock-background: #1e1e1e;
+	--vscode-textSeparator-foreground: #424242;
+	--vscode-textPreformat-foreground: #d7ba7d;
+	--vscode-textLink-foreground: #3794ff;
+
+	/* Status indicators */
+	--vscode-errorForeground: #f97583;
+	--vscode-descriptionForeground: #959da5;
+	--vscode-charts-green: #89d185;
+	--vscode-titleBar-inactiveForeground: #cccccc99;
+
+	/* Menu (from shadcn/ui) */
+	--vscode-menu-background: #2f363d;
+	--vscode-menu-foreground: #e1e4e8;
+	--vscode-disabledForeground: #cccccc;
+
+	/* Typography */
+	--vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	--vscode-font-size: 13px;
+	--vscode-editor-font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono",
+		"DejaVu Sans Mono", "Courier New", monospace;
+	--vscode-editor-font-size: 12px;
+	--vscode-editor-line-height: 18px;
+}
+
+/* Dark theme */
+.dark {
+	color-scheme: dark;
+	background-color: var(--vscode-editor-background);
+	color: var(--vscode-editor-foreground);
+}
+
+/* Light theme */
+.light {
+	color-scheme: light;
+	background-color: #ffffff;
+	color: #000000;
+}
+
+/* Global styles */
+body {
+	margin: 0;
+	padding: 0;
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
+	line-height: 1.4;
+}
+
+/* Mermaid diagram styles */
+.mermaid {
+	background: var(--vscode-editor-background);
+}
+
+/* VS Code scrollbar styles */
+::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #424242;
+	border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #686868;
+}

webview-ui/.storybook/preview.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import type { Preview, StoryFn } from "@storybook/react"
+import { themes } from "@storybook/theming"
+import "./preview.css"
+import "@vscode/codicons/dist/codicon.css"
+import { PreviewExtensionStateContextProvider } from "./preview-context"
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on.*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+		darkMode: {
+			dark: { ...themes.dark },
+			light: { ...themes.light },
+			current: "dark",
+		},
+	},
+	decorators: [
+		(Story: StoryFn) => {
+			return (
+				<PreviewExtensionStateContextProvider>
+					<Story />
+				</PreviewExtensionStateContextProvider>
+			)
+		},
+	],
+}
+
+export default preview