Fix Chromatic compatibility by removing styled shim

Author: ammario

.storybook/main.ts

@@ -19,27 +19,25 @@ const config: StorybookConfig = {
     "options": {}
   },
   async viteFinal(config: UserConfig) {
-    // Filter out Storybook's default React plugin
+    // Remove any existing Vite React plugins that Storybook registers
     config.plugins = (config.plugins || []).filter((plugin) => {
-      return !(
-        Array.isArray(plugin) &&
-        plugin[0]?.name?.includes('vite:react')
-      );
+      if (!plugin) return true;
+      const pluginName = Array.isArray(plugin) ? plugin[0]?.name : plugin.name;
+      return !pluginName?.includes('vite:react');
     });
 
-    // Add React plugin with emotion configuration
-    // Force Babel to process all files (not just JSX) to ensure emotion transforms work
+    // Re-register the React plugin with Emotion configuration
     config.plugins.push(
       react({
-        include: '**/*.{jsx,tsx,ts,js}',
+        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
         jsxImportSource: '@emotion/react',
         babel: {
           plugins: ['@emotion/babel-plugin'],
         },
       })
     );
 
-    // Optimize emotion dependencies
+    // Pre-bundle Emotion packages to reduce cold start time
     config.optimizeDeps = {
       ...config.optimizeDeps,
       include: [
@@ -50,13 +48,7 @@ const config: StorybookConfig = {
       ],
     };
 
-    // Ensure emotion packages are resolved correctly
-    config.resolve = {
-      ...config.resolve,
-      dedupe: ['@emotion/react', '@emotion/styled', '@emotion/cache'],
-    };
-
     return config;
   },
 };
-export default config;
+export default config;

src/components/AIView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 import { MessageRenderer } from "./Messages/MessageRenderer";
 import { InterruptedBarrier } from "./Messages/ChatBarrier/InterruptedBarrier";
 import { StreamingBarrier } from "./Messages/ChatBarrier/StreamingBarrier";

src/components/ChatInput.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback, useEffect } from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 import { CommandSuggestions, COMMAND_SUGGESTION_KEYS } from "./CommandSuggestions";
 import type { Toast } from "./ChatInputToast";
 import { ChatInputToast, SolutionLabel } from "./ChatInputToast";

src/components/ChatInputToast.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import React, { useEffect, useCallback } from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 import { keyframes, css } from "@emotion/react";
 
 const slideIn = keyframes`

src/components/ChatMetaSidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 import { usePersistedState } from "@/hooks/usePersistedState";
 import { CostsTab } from "./ChatMetaSidebar/CostsTab";
 import { ToolsTab } from "./ChatMetaSidebar/ToolsTab";

src/components/ChatMetaSidebar/CostsTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 import { useChatContext } from "@/contexts/ChatContext";
 import { TooltipWrapper, Tooltip, HelpIndicator } from "../Tooltip";
 import { getModelStats } from "@/utils/tokens/modelStats";

src/components/ChatMetaSidebar/ToolsTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 
 const PlaceholderContainer = styled.div`
   color: #888888;

src/components/CommandSuggestions.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 import type { SlashSuggestion } from "@/utils/slashCommands/types";
 
 // Export the keys that CommandSuggestions handles

src/components/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import React, { Component } from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 
 const ErrorContainer = styled.div`
   padding: 20px;

src/components/ErrorMessage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "@/styles/styled";
+import styled from "@emotion/styled";
 
 const ErrorContainer = styled.div`
   background-color: var(--color-error-bg, #fee);