+
{isHighRisk ? (
<>
- ⚠️ WARNING: This operation may be irreversible and will permanently modify your database.
+ ⚠️ WARNING: This operation may be irreversible and will permanently modify your database.
) : (
<>This operation will make changes to your database. Please review carefully before confirming.
@@ -88,7 +100,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
Cancel
@@ -96,7 +108,7 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
Confirm {operationType}
@@ -116,15 +128,15 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-
+
- {content}
+ {content}
-
+
+
{(user?.name || user?.email || 'U').charAt(0).toUpperCase()}
@@ -141,46 +153,61 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-
+
QW
-
+
-
+
{hasSQL ? 'Generated SQL Query' : 'Query Analysis'}
{hasSQL && (
-
- {content}
-
+
+
+ {copied ? (
+
+
+ {content}
+
+
{analysisInfo?.explanation && (
-
-
Explanation:
-
{analysisInfo.explanation}
+
+
Explanation:
+
{analysisInfo.explanation}
)}
{analysisInfo?.missing && (
-
-
Missing Information:
-
{analysisInfo.missing}
+
+
Missing Information:
+
{analysisInfo.missing}
)}
{analysisInfo?.ambiguities && (
-
-
Ambiguities:
-
{analysisInfo.ambiguities}
+
+
Ambiguities:
+
{analysisInfo.ambiguities}
)}
@@ -198,28 +225,28 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-
+
QW
-
+
- Query Results
+ Query Results
{queryData?.length || 0} rows
{queryData && queryData.length > 0 && (
-
+
-
-
+
+
{Object.keys(queryData[0]).map((column) => (
-
+
{column}
))}
@@ -227,9 +254,9 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
{queryData.map((row, index) => (
-
+
{Object.values(row).map((value: any, cellIndex) => (
-
+
{String(value)}
))}
@@ -253,12 +280,12 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-
+
QW
-
@@ -272,21 +299,21 @@ const ChatMessage = ({ type, content, steps, queryData, analysisInfo, confirmati
-
+
QW
-
+
{steps?.map((step, index) => (
-
-
- {step.icon === 'search' &&
+
+ {step.icon === 'search' &&
{step.text}
@@ -294,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"
>
void;
+ onSettingsClick?: () => void;
}
const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
@@ -42,7 +44,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}
>
@@ -57,7 +59,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 +72,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}
>
@@ -85,12 +87,28 @@ const SidebarIcon = ({ icon: Icon, label, active, onClick, href, testId }: {
);
-const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false, onToggleCollapse }: SidebarProps) => {
+const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false, onToggleCollapse, onSettingsClick }: SidebarProps) => {
const isMobile = useIsMobile();
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const isSettingsOpen = location.pathname === '/settings';
+
+ const handleSettingsClick = () => {
+ if (onSettingsClick) {
+ onSettingsClick();
+ }
+ if (isSettingsOpen) {
+ navigate('/');
+ } else {
+ navigate('/settings');
+ }
+ };
+
return (
<>
@@ -119,13 +137,13 @@ const Sidebar = ({ className, onSchemaClick, isSchemaOpen, isCollapsed = false,
-
+
diff --git a/app/src/components/modals/DatabaseModal.tsx b/app/src/components/modals/DatabaseModal.tsx
index e02e6e3d..5442cf61 100644
--- a/app/src/components/modals/DatabaseModal.tsx
+++ b/app/src/components/modals/DatabaseModal.tsx
@@ -107,7 +107,27 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
});
if (!response.ok) {
- throw new Error(`Network response was not ok (${response.status})`);
+ // Try to parse error message from server for all error responses
+ try {
+ const errorData = await response.json();
+ if (errorData.error) {
+ throw new Error(errorData.error);
+ }
+ } catch (jsonError) {
+ // If JSON parsing fails, fall back to status-based messages
+ }
+
+ // Fallback error messages by status code
+ const errorMessages: Record = {
+ 400: 'Invalid database connection URL.',
+ 401: 'Not authenticated. Please sign in to connect databases.',
+ 403: 'Access denied. You do not have permission to connect databases.',
+ 409: 'Conflict with existing database connection.',
+ 422: 'Invalid database connection parameters.',
+ 500: 'Server error. Please try again later.',
+ };
+
+ throw new Error(errorMessages[response.status] || `Failed to connect to database (${response.status})`);
}
// Process streaming response
@@ -217,7 +237,15 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
Connect to Database
- Connect to PostgreSQL or MySQL database using a connection URL or manual entry
+ Connect to PostgreSQL or MySQL database using a connection URL or manual entry.{" "}
+
+ Privacy Policy
+
@@ -229,18 +257,18 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
-
+
-
+
-
+
MySQL
@@ -256,7 +284,7 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
setConnectionMode('url')}
data-testid="connection-mode-url"
>
@@ -265,7 +293,7 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
setConnectionMode('manual')}
data-testid="connection-mode-manual"
>
@@ -289,7 +317,7 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
}
value={connectionUrl}
onChange={(e) => setConnectionUrl(e.target.value)}
- className="bg-muted border-border font-mono text-sm"
+ className="bg-muted border-border font-mono text-sm focus-visible:ring-purple-500"
/>
Enter your database connection string
@@ -301,57 +329,57 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
<>
Host
-
-
+
Port
-
-
+
Database Name
-
-
+
Username
-
-
+
Password
-
@@ -387,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
@@ -394,7 +423,7 @@ const DatabaseModal = ({ open, onOpenChange }: DatabaseModalProps) => {
{isConnecting ? "Connecting..." : "Connect"}
diff --git a/app/src/components/modals/DeleteDatabaseModal.tsx b/app/src/components/modals/DeleteDatabaseModal.tsx
index f82bcf8a..7ba09ddb 100644
--- a/app/src/components/modals/DeleteDatabaseModal.tsx
+++ b/app/src/components/modals/DeleteDatabaseModal.tsx
@@ -32,7 +32,7 @@ const DeleteDatabaseModal = ({
return (
@@ -40,7 +40,7 @@ const DeleteDatabaseModal = ({
+
{isDemo ? (
Demo databases cannot be deleted.
@@ -54,7 +54,7 @@ const DeleteDatabaseModal = ({
Are you sure you want to delete "{databaseName}"?
-
+
This action cannot be undone. All data and schema information
for this database will be permanently removed.
@@ -67,7 +67,7 @@ const DeleteDatabaseModal = ({
onOpenChange(false)}
- className="bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700"
+ className="bg-card border-border text-muted-foreground hover:bg-muted"
data-testid="delete-modal-cancel"
>
Cancel
diff --git a/app/src/components/modals/SettingsModal.tsx b/app/src/components/modals/SettingsModal.tsx
new file mode 100644
index 00000000..993a237e
--- /dev/null
+++ b/app/src/components/modals/SettingsModal.tsx
@@ -0,0 +1,109 @@
+import { useState, useEffect } from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Save, X } from "lucide-react";
+
+interface SettingsModalProps {
+ open: boolean;
+ onClose: () => void;
+ initialRules?: string;
+ onSave: (rules: string) => void;
+}
+
+const SettingsModal = ({ open, onClose, initialRules = "", onSave }: SettingsModalProps) => {
+ const [rules, setRules] = useState(initialRules);
+
+ // Sync with prop changes
+ useEffect(() => {
+ setRules(initialRules);
+ }, [initialRules]);
+
+ const handleSave = () => {
+ onSave(rules);
+ onClose();
+ };
+
+ const handleClear = () => {
+ setRules("");
+ };
+
+ return (
+
+
+
+ Query Settings
+
+ Define custom rules and specifications for SQL generation. These rules will be applied to all your queries.
+
+
+
+
+
+
+ User Rules & Specifications
+
+