Skip to content

Commit 8850ec9

Browse files
chadgauthchadgauth
committed
Redesign Chat Window and Fix Chat Disabling Issue
1 parent e413a59 commit 8850ec9

30 files changed

+4434
-690
lines changed

‎webview-ui/.storybook/main.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,23 @@ import type { StorybookConfig } from "@storybook/react-vite"
22

33
const config: StorybookConfig = {
44
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5-
addons: ["@storybook/addon-essentials", "storybook-dark-mode"],
5+
addons: [
6+
"@storybook/addon-links",
7+
"@storybook/addon-essentials",
8+
"@storybook/addon-interactions",
9+
"storybook-dark-mode",
10+
"storybook-vscode-component/register",
11+
],
612
framework: {
713
name: "@storybook/react-vite",
814
options: {},
915
},
16+
docs: {
17+
autodocs: "tag",
18+
},
19+
core: {
20+
builder: "@storybook/builder-vite",
21+
},
1022
}
23+
1124
export default config

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

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { ExtensionStateContextType, ExtensionStateContext } from "../src/context/ExtensionStateContext"
2+
import { McpServer } from "../../src/shared/mcp"
3+
import { ApiConfiguration, ModelInfo } from "../../src/shared/api"
4+
import { HistoryItem } from "../../src/shared/HistoryItem" // Import HistoryItem
5+
import { useContext } from "react"
6+
7+
// Mock ModelInfo
8+
const mockModelInfo: ModelInfo = {
9+
contextWindow: 2048,
10+
supportsImages: true,
11+
supportsPromptCache: true,
12+
reasoningEffort: "low",
13+
}
14+
15+
// Mock API configuration
16+
const mockApiConfig: ApiConfiguration = {
17+
apiModelId: "mock-model",
18+
glamaModelInfo: mockModelInfo,
19+
}
20+
21+
// Mock MCP server
22+
const mockMcpServer: McpServer = {
23+
name: "mock-server",
24+
tools: [],
25+
resources: [],
26+
resourceTemplates: [],
27+
disabled: false,
28+
config: "?",
29+
status: "disconnected",
30+
}
31+
32+
// Mock task history item (Corrected to match HistoryItem type)
33+
const mockTaskHistoryItem: HistoryItem = {
34+
id: "mock-task-id",
35+
ts: Date.now(),
36+
task: "Sample task",
37+
tokensIn: 100,
38+
tokensOut: 200,
39+
totalCost: 0.5,
40+
}
41+
42+
// Mock file paths and opened tabs (more realistic mock data)
43+
const mockFilePaths: string[] = [
44+
"/Roo-Code/src/components/chat/ChatTextArea.tsx",
45+
"/Roo-Code/src/components/common/CodeBlock.tsx",
46+
"/Roo-Code/webview-ui/.storybook/preview-context.tsx",
47+
]
48+
const mockOpenedTabs: Array<{ label: string; isActive: boolean; path?: string }> = [
49+
{ label: "ChatTextArea.tsx", isActive: true, path: "/Roo-Code/src/components/chat/ChatTextArea.tsx" },
50+
{ label: "CodeBlock.tsx", isActive: false, path: "/Roo-Code/src/components/common/CodeBlock.tsx" },
51+
]
52+
53+
const defaultContext: ExtensionStateContextType = {
54+
// Version and state
55+
version: "1.0.0",
56+
didHydrateState: true,
57+
showWelcome: false,
58+
59+
// Messages and history
60+
clineMessages: [],
61+
taskHistory: [mockTaskHistoryItem],
62+
shouldShowAnnouncement: false,
63+
64+
// API and models
65+
apiConfiguration: mockApiConfig,
66+
glamaModels: {},
67+
requestyModels: {},
68+
openRouterModels: {},
69+
unboundModels: {},
70+
openAiModels: [],
71+
72+
// MCP
73+
mcpServers: [mockMcpServer],
74+
mcpEnabled: true,
75+
enableMcpServerCreation: true,
76+
77+
// Files and tabs
78+
filePaths: mockFilePaths,
79+
openedTabs: mockOpenedTabs,
80+
currentCheckpoint: undefined,
81+
82+
// Settings
83+
mode: "code",
84+
preferredLanguage: "English",
85+
requestDelaySeconds: 0,
86+
rateLimitSeconds: 0,
87+
writeDelayMs: 0,
88+
browserViewportSize: "1200x800",
89+
screenshotQuality: 75,
90+
terminalOutputLineLimit: 500,
91+
fuzzyMatchThreshold: 1.0,
92+
maxOpenTabsContext: 20,
93+
94+
// Features
95+
diffEnabled: false,
96+
checkpointsEnabled: false,
97+
soundEnabled: false,
98+
soundVolume: 0.5,
99+
autoApprovalEnabled: true,
100+
101+
// Permissions
102+
alwaysAllowBrowser: true,
103+
alwaysAllowExecute: true,
104+
alwaysAllowMcp: true,
105+
alwaysAllowModeSwitch: true,
106+
alwaysAllowReadOnly: true,
107+
alwaysApproveResubmit: true,
108+
alwaysAllowWrite: true,
109+
allowedCommands: [],
110+
111+
// Other state
112+
customModePrompts: {},
113+
customSupportPrompts: {},
114+
experiments: {
115+
experimentalDiffStrategy: false,
116+
search_and_replace: false,
117+
insert_content: false,
118+
powerSteering: false,
119+
},
120+
customModes: [],
121+
enhancementApiConfigId: undefined,
122+
currentApiConfigName: "default",
123+
listApiConfigMeta: [],
124+
theme: {},
125+
126+
// Setters
127+
setApiConfiguration: () => {},
128+
setCustomInstructions: () => {},
129+
setAlwaysAllowReadOnly: () => {},
130+
setAlwaysAllowWrite: () => {},
131+
setAlwaysAllowExecute: () => {},
132+
setAlwaysAllowBrowser: () => {},
133+
setAlwaysAllowMcp: () => {},
134+
setAlwaysAllowModeSwitch: () => {},
135+
setShowAnnouncement: () => {},
136+
setAllowedCommands: () => {},
137+
setSoundEnabled: () => {},
138+
setSoundVolume: () => {},
139+
setDiffEnabled: () => {},
140+
setCheckpointsEnabled: () => {},
141+
setBrowserViewportSize: () => {},
142+
setFuzzyMatchThreshold: () => {},
143+
setPreferredLanguage: () => {},
144+
setWriteDelayMs: () => {},
145+
setScreenshotQuality: () => {},
146+
setTerminalOutputLineLimit: () => {},
147+
setMcpEnabled: () => {},
148+
setEnableMcpServerCreation: () => {},
149+
setAlwaysApproveResubmit: () => {},
150+
setRequestDelaySeconds: () => {},
151+
setRateLimitSeconds: () => {},
152+
setCurrentApiConfigName: () => {},
153+
setListApiConfigMeta: () => {},
154+
onUpdateApiConfig: () => {},
155+
setMode: () => {},
156+
setCustomModePrompts: () => {},
157+
setCustomSupportPrompts: () => {},
158+
setEnhancementApiConfigId: () => {},
159+
setExperimentEnabled: () => {},
160+
setAutoApprovalEnabled: () => {},
161+
setCustomModes: () => {},
162+
setMaxOpenTabsContext: () => {},
163+
}
164+
165+
export const PreviewExtensionStateContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
166+
console.log("PreviewExtensionStateContextProvider is rendering!") // Re-add console log
167+
console.log("Context Value:", defaultContext) // Log context value
168+
return <ExtensionStateContext.Provider value={defaultContext}>{children}</ExtensionStateContext.Provider>
169+
}
170+
171+
export const usePreviewExtensionState = () => {
172+
const context = useContext(ExtensionStateContext)
173+
console.log("useExtensionState Hook Context:", context) // Log context in hook
174+
return context
175+
}

‎webview-ui/.storybook/preview.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/* VS Code theme variables */
2+
:root {
3+
/* Base theme */
4+
--vscode-foreground: #d1d5da;
5+
--vscode-editor-background: #24292e;
6+
--vscode-editor-foreground: #e1e4e8;
7+
8+
/* Input elements */
9+
--vscode-input-background: #2f363d;
10+
--vscode-input-foreground: #e1e4e8;
11+
--vscode-input-border: #1b1f23;
12+
--vscode-focusBorder: #005cc5;
13+
14+
/* Buttons */
15+
--vscode-button-background: #176f2c;
16+
--vscode-button-foreground: #dcffe4;
17+
--vscode-button-hoverBackground: #1177bb;
18+
--vscode-button-secondaryBackground: #444d56;
19+
--vscode-button-secondaryForeground: #ffffff;
20+
21+
/* Dropdowns and Lists */
22+
--vscode-dropdown-background: #2f363d;
23+
--vscode-dropdown-foreground: #e1e4e8;
24+
--vscode-dropdown-border: #1b1f23;
25+
--vscode-list-hoverBackground: #282e34;
26+
--vscode-list-hoverForeground: #e1e4e8;
27+
--vscode-list-focusBackground: #044289;
28+
29+
/* Badges and Notifications */
30+
--vscode-badge-background: #044289;
31+
--vscode-badge-foreground: #c8e1ff;
32+
--vscode-notifications-background: #2f363d;
33+
--vscode-notifications-foreground: #e1e4e8;
34+
--vscode-notifications-border: #1b1f23;
35+
36+
/* Editor elements */
37+
--vscode-editorGroup-border: #444444;
38+
--vscode-diffEditor-insertedTextBackground: #37373d;
39+
--vscode-diffEditor-removedTextBackground: #3c1f1f;
40+
--vscode-textCodeBlock-background: #1e1e1e;
41+
--vscode-textSeparator-foreground: #424242;
42+
--vscode-textPreformat-foreground: #d7ba7d;
43+
--vscode-textLink-foreground: #3794ff;
44+
45+
/* Status indicators */
46+
--vscode-errorForeground: #f97583;
47+
--vscode-descriptionForeground: #959da5;
48+
--vscode-charts-green: #89d185;
49+
--vscode-titleBar-inactiveForeground: #cccccc99;
50+
51+
/* Menu (from shadcn/ui) */
52+
--vscode-menu-background: #2f363d;
53+
--vscode-menu-foreground: #e1e4e8;
54+
--vscode-disabledForeground: #cccccc;
55+
56+
/* Typography */
57+
--vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
58+
--vscode-font-size: 13px;
59+
--vscode-editor-font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono",
60+
"DejaVu Sans Mono", "Courier New", monospace;
61+
--vscode-editor-font-size: 12px;
62+
--vscode-editor-line-height: 18px;
63+
}
64+
65+
/* Dark theme */
66+
.dark {
67+
color-scheme: dark;
68+
background-color: var(--vscode-editor-background);
69+
color: var(--vscode-editor-foreground);
70+
}
71+
72+
/* Light theme */
73+
.light {
74+
color-scheme: light;
75+
background-color: #ffffff;
76+
color: #000000;
77+
}
78+
79+
/* Global styles */
80+
body {
81+
margin: 0;
82+
padding: 0;
83+
font-family: var(--vscode-font-family);
84+
font-size: var(--vscode-font-size);
85+
line-height: 1.4;
86+
}
87+
88+
/* Mermaid diagram styles */
89+
.mermaid {
90+
background: var(--vscode-editor-background);
91+
}
92+
93+
/* VS Code scrollbar styles */
94+
::-webkit-scrollbar {
95+
width: 10px;
96+
height: 10px;
97+
}
98+
99+
::-webkit-scrollbar-track {
100+
background: transparent;
101+
}
102+
103+
::-webkit-scrollbar-thumb {
104+
background: #424242;
105+
border-radius: 5px;
106+
}
107+
108+
::-webkit-scrollbar-thumb:hover {
109+
background: #686868;
110+
}
111+
112+
/* Dark theme */
113+
.dark {
114+
color-scheme: dark;
115+
background-color: var(--vscode-editor-background);
116+
color: var(--vscode-editor-foreground);
117+
}
118+
119+
/* Light theme */
120+
.light {
121+
color-scheme: light;
122+
background-color: #ffffff;
123+
color: #000000;
124+
}
125+
126+
/* Global styles */
127+
body {
128+
margin: 0;
129+
padding: 0;
130+
font-family: var(--vscode-font-family);
131+
font-size: var(--vscode-font-size);
132+
line-height: 1.4;
133+
}
134+
135+
/* Mermaid diagram styles */
136+
.mermaid {
137+
background: var(--vscode-editor-background);
138+
}
139+
140+
/* VS Code scrollbar styles */
141+
::-webkit-scrollbar {
142+
width: 10px;
143+
height: 10px;
144+
}
145+
146+
::-webkit-scrollbar-track {
147+
background: transparent;
148+
}
149+
150+
::-webkit-scrollbar-thumb {
151+
background: #424242;
152+
border-radius: 5px;
153+
}
154+
155+
::-webkit-scrollbar-thumb:hover {
156+
background: #686868;
157+
}

‎webview-ui/.storybook/preview.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)