diff --git a/app/src/components/SuggestionCards.tsx b/app/src/components/SuggestionCards.tsx index fa28f809..93114e92 100644 --- a/app/src/components/SuggestionCards.tsx +++ b/app/src/components/SuggestionCards.tsx @@ -12,7 +12,7 @@ const SuggestionCards = ({ suggestions, onSelect, disabled = false }: Suggestion {suggestions.map((suggestion) => ( onSelect(suggestion)} role="button" tabIndex={disabled ? -1 : 0} @@ -26,7 +26,7 @@ const SuggestionCards = ({ suggestions, onSelect, disabled = false }: Suggestion }} > -
+
{suggestion}
diff --git a/app/src/components/chat/ChatInterface.tsx b/app/src/components/chat/ChatInterface.tsx index 60679654..ea8ccd0f 100644 --- a/app/src/components/chat/ChatInterface.tsx +++ b/app/src/components/chat/ChatInterface.tsx @@ -63,9 +63,9 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat QW
- - - + + +
@@ -489,7 +489,7 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat }; return ( -
+
{/* Messages Area */}
@@ -515,7 +515,7 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat
{/* Bottom Section with Suggestions and Input */} -
+
{/* Suggestion Cards - Only show for DEMO_CRM database */} {(selectedGraph?.id === 'DEMO_CRM' || selectedGraph?.name === 'DEMO_CRM') && ( @@ -537,13 +537,13 @@ const ChatInterface = ({ className, disabled = false, onProcessingChange }: Chat {isProcessing && (
- Processing your query... + Processing your query...
)} {/* Footer */}
-

+

Powered by FalkorDB

diff --git a/app/src/components/chat/ChatMessage.tsx b/app/src/components/chat/ChatMessage.tsx index 2b4f10bc..72a0e700 100644 --- a/app/src/components/chat/ChatMessage.tsx +++ b/app/src/components/chat/ChatMessage.tsx @@ -72,12 +72,12 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-

+

This operation will perform a {operationType} query:

{confirmationData?.sqlQuery && ( -
- 
+                      

+                        
                           {confirmationData.sqlQuery}
                         

                       

@@ -85,7 +85,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-

+

{isHighRisk ? ( <> ⚠️ WARNING: This operation may be irreversible and will permanently modify your database. @@ -100,7 +100,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati - 

+                    
                       {content}
@@ -193,21 +193,21 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati {!isValid && (
{analysisInfo?.explanation && ( -
+
Explanation: -

{analysisInfo.explanation}

+

{analysisInfo.explanation}

)} {analysisInfo?.missing && ( -
+
Missing Information: -

{analysisInfo.missing}

+

{analysisInfo.missing}

)} {analysisInfo?.ambiguities && ( -
+
Ambiguities: -

{analysisInfo.ambiguities}

+

{analysisInfo.ambiguities}

)}
@@ -230,7 +230,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
- +
@@ -241,12 +241,12 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
{queryData && queryData.length > 0 && (
-
+
- - + + {Object.keys(queryData[0]).map((column) => ( - ))} @@ -254,9 +254,9 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati {queryData.map((row, index) => ( - + {Object.values(row).map((value: any, cellIndex) => ( - ))} @@ -285,7 +285,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-
+
{content}
@@ -304,11 +304,11 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
- +
{steps?.map((step, index) => ( -
+
{step.icon === 'search' && } {step.icon === 'database' && } @@ -321,7 +321,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati {progress !== undefined && (
-

{progress}% complete

+

{progress}% complete

)}
diff --git a/app/src/components/chat/QueryInput.tsx b/app/src/components/chat/QueryInput.tsx index 670dd20b..f38cdda6 100644 --- a/app/src/components/chat/QueryInput.tsx +++ b/app/src/components/chat/QueryInput.tsx @@ -27,7 +27,7 @@ const QueryInput = ({ onSubmit, placeholder = "Ask me anything about your databa onChange={(e) => setQuery(e.target.value)} placeholder={placeholder} disabled={disabled} - className="min-h-[60px] bg-gray-800 border-gray-600 text-gray-200 placeholder-gray-500 resize-none pr-12 focus:border-purple-500 focus:ring-purple-500/20 disabled:opacity-50 disabled:cursor-not-allowed" + className="min-h-[60px] bg-card border-border text-foreground placeholder-muted-foreground resize-none pr-12 focus-visible:border-purple-500 focus-visible:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed" onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey && !disabled) { e.preventDefault(); diff --git a/app/src/components/layout/Header.tsx b/app/src/components/layout/Header.tsx index bfd2fffa..7c08dff3 100644 --- a/app/src/components/layout/Header.tsx +++ b/app/src/components/layout/Header.tsx @@ -85,7 +85,7 @@ const Header = ({ onConnectDatabase, onUploadSchema }: HeaderProps) => { href="https://github.com/FalkorDB/QueryWeaver" target="_blank" rel="noopener noreferrer" - className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors text-gray-300 hover:text-white" + className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-card hover:bg-muted transition-colors text-muted-foreground hover:text-foreground" title="View QueryWeaver on GitHub" > @@ -57,7 +57,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: { className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${ active ? 'bg-purple-600 text-white' - : 'text-gray-400 hover:bg-gray-800 hover:text-white' + : 'text-muted-foreground hover:bg-card hover:text-foreground' }`} data-testid={testId} > @@ -70,7 +70,7 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: { className={`flex h-10 w-10 items-center justify-center rounded-lg transition-colors ${ active ? 'bg-purple-600 text-white' - : 'text-gray-400 hover:bg-gray-800 hover:text-white' + : 'text-muted-foreground hover:bg-card hover:text-foreground' }`} data-testid={testId} > @@ -90,7 +90,7 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false, return ( <>
- +
- +
- setPort(e.target.value)} - className="bg-muted border-border" + className="bg-muted border-border focus-visible:ring-purple-500" />
- +
- setDatabase(e.target.value)} - className="bg-muted border-border" + className="bg-muted border-border focus-visible:ring-purple-500" />
- +
- setUsername(e.target.value)} - className="bg-muted border-border" + className="bg-muted border-border focus-visible:ring-purple-500" />
- +
- setPassword(e.target.value)} - className="bg-muted border-border" + className="bg-muted border-border focus-visible:ring-purple-500" />
@@ -395,6 +415,7 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => { variant="outline" onClick={() => onOpenChange(false)} disabled={isConnecting} + className="hover:bg-purple-500/20 hover:text-foreground" data-testid="cancel-database-button" > Cancel @@ -402,7 +423,7 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
+ {column}
+ {String(value)}
- - Token - Created - Actions + + Token + Created + Actions {tokens.map((token) => ( - - + + ****{token.token_id} - + {formatDate(token.created_at)} @@ -268,10 +268,10 @@ const TokensModal: React.FC = ({ open, onOpenChange }) => { {/* Delete Confirmation Dialog */} !open && setDeleteTokenId(null)}> - + - Delete Token - + Delete Token + Are you sure you want to delete this token? This action cannot be undone.

@@ -280,7 +280,7 @@ const TokensModal: React.FC = ({ open, onOpenChange }) => { diff --git a/app/src/components/schema/SchemaViewer.tsx b/app/src/components/schema/SchemaViewer.tsx index fb5fb575..863bde17 100644 --- a/app/src/components/schema/SchemaViewer.tsx +++ b/app/src/components/schema/SchemaViewer.tsx @@ -271,7 +271,7 @@ const SchemaViewer = ({ isOpen, onClose, onWidthChange, sidebarWidth = 64 }: Sch // Theme-aware colors const isLight = theme === 'light'; const textColor = isLight ? '#111' : '#f5f5f5'; - const fillColor = isLight ? '#ffffff' : '#1f2937'; + const fillColor = isLight ? '#ffffff' : '#191919'; const strokeColor = isLight ? '#d1d5db' : '#374151'; const columnTextColor = isLight ? '#111' : '#e5e7eb'; const typeTextColor = isLight ? '#6b7280' : '#9ca3af'; @@ -383,7 +383,7 @@ const SchemaViewer = ({ isOpen, onClose, onWidthChange, sidebarWidth = 64 }: Sch // Get theme-aware colors const getBackgroundColor = () => { - return theme === 'light' ? '#ffffff' : '#030712'; + return theme === 'light' ? '#ffffff' : '#191919'; }; const getLinkColor = () => { @@ -403,7 +403,7 @@ const SchemaViewer = ({ isOpen, onClose, onWidthChange, sidebarWidth = 64 }: Sch {/* Schema Viewer */}
{/* Header */} -
-

Database Schema

+
+

Database Schema

{/* Controls */} -
+
{/* Graph Container */} -
+
{loading && (
-
Loading schema...
+
Loading schema...
)} {!loading && schemaData && schemaData.nodes && schemaData.nodes.length > 0 && ( @@ -521,7 +521,7 @@ const SchemaViewer = ({ isOpen, onClose, onWidthChange, sidebarWidth = 64 }: Sch }} >
- +
diff --git a/app/src/components/ui/theme-toggle.tsx b/app/src/components/ui/theme-toggle.tsx index 2a8d6d72..494ef862 100644 --- a/app/src/components/ui/theme-toggle.tsx +++ b/app/src/components/ui/theme-toggle.tsx @@ -12,8 +12,9 @@ type Theme = "light" | "dark"; const ThemeToggle = () => { const [theme, setTheme] = useState(() => { try { - const savedTheme = localStorage.getItem("theme") as Theme; - return savedTheme || "dark"; + const savedTheme = localStorage.getItem("theme"); + // Normalize: only accept "light" or "dark", default to "dark" + return (savedTheme === "light" || savedTheme === "dark") ? savedTheme : "dark"; } catch { return "dark"; } @@ -47,7 +48,7 @@ const ThemeToggle = () => { - -
-

{user?.name}

-

{user?.email}

+ +
+

{user?.name}

+

{user?.email}

- setShowTokensModal(true)} data-testid="api-tokens-menu-item"> + setShowTokensModal(true)} data-testid="api-tokens-menu-item"> API Tokens - - + + Logout @@ -448,7 +448,7 @@ const Index = () => { href="https://github.com/FalkorDB/QueryWeaver" target="_blank" rel="noopener noreferrer" - className="flex items-center gap-1 px-2 py-1 rounded bg-gray-800 hover:bg-gray-700 transition-colors text-gray-300" + className="flex items-center gap-1 px-2 py-1 rounded bg-card hover:bg-muted transition-colors text-muted-foreground" > { - -
-

{user?.name}

-

{user?.email}

+ +
+

{user?.name}

+

{user?.email}

- setShowTokensModal(true)} data-testid="api-tokens-menu-item"> + setShowTokensModal(true)} data-testid="api-tokens-menu-item"> API Tokens - - + + Logout @@ -506,7 +506,7 @@ const Index = () => { {/* Row 2: Tagline + Database Status */}
-

Graph-Powered Text-to-SQL

+

Graph-Powered Text-to-SQL

{selectedGraph ? ( {selectedGraph.name === 'DEMO_CRM' ? 'CRM' : selectedGraph.name} @@ -521,11 +521,11 @@ const Index = () => { {/* Sub-header for controls */} -
+
- + {graphs.map((graph) => { const isDemo = graph.id.startsWith('general_'); return ( { if (!isRefreshingSchema && !isChatProcessing) selectGraph(graph.id); }} disabled={isRefreshingSchema || isChatProcessing} data-testid={`database-option-${graph.id}`} @@ -574,7 +574,7 @@ const Index = () => { ); })} {graphs.length === 0 && ( - + No databases available )} @@ -593,7 +593,7 @@ const Index = () => {