@lastbrain/ai-ui-react 1.0.8 → 1.0.10

package/src/styles/inline.ts

@@ -1,77 +1,300 @@
 /**
  * Inline styles for AI UI components
- * These styles are injected directly to avoid CSS import requirements
+ * Theme: Purple/Violet primary color with light/dark mode support
  */
 
+// Theme colors
+const colors = {
+  // Purple/Violet theme
+  primary: "#8b5cf6",
+  primaryHover: "#7c3aed",
+  primaryLight: "#a78bfa",
+  primaryDark: "#6d28d9",
+
+  // Status colors
+  success: "#10b981",
+  successLight: "#34d399",
+  warning: "#f59e0b",
+  warningLight: "#fbbf24",
+  danger: "#ef4444",
+  dangerLight: "#f87171",
+
+  // Neutral colors - Light mode
+  light: {
+    bg: "#ffffff",
+    bgSecondary: "#f9fafb",
+    bgTertiary: "#f3f4f6",
+    border: "#e5e7eb",
+    borderLight: "#f3f4f6",
+    text: "#111827",
+    textSecondary: "#6b7280",
+    textTertiary: "#9ca3af",
+    shadow: "rgba(0, 0, 0, 0.1)",
+    shadowMd:
+      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    shadowLg:
+      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    shadowXl:
+      "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+  },
+
+  // Neutral colors - Dark mode
+  dark: {
+    bg: "#1f2937",
+    bgSecondary: "#111827",
+    bgTertiary: "#0f172a",
+    border: "#374151",
+    borderLight: "#4b5563",
+    text: "#f9fafb",
+    textSecondary: "#d1d5db",
+    textTertiary: "#9ca3af",
+    shadow: "rgba(0, 0, 0, 0.3)",
+    shadowMd:
+      "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
+    shadowLg:
+      "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
+    shadowXl:
+      "0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
+  },
+};
+
+// Use light mode by default (can be made dynamic later)
+const isDark =
+  typeof window !== "undefined" &&
+  window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+const theme = isDark ? colors.dark : colors.light;
+
 export const aiStyles = {
+  // Input field
+  input: {
+    width: "100%",
+    padding: "12px 40px 12px 16px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    color: theme.text,
+    background: theme.bg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: "8px",
+    outline: "none",
+    transition: "all 0.2s",
+    fontFamily: "inherit",
+  } as React.CSSProperties,
+
+  inputFocus: {
+    borderColor: colors.primary,
+    boxShadow: `0 0 0 3px ${colors.primary}20`,
+  } as React.CSSProperties,
+
+  inputError: {
+    borderColor: colors.danger,
+  } as React.CSSProperties,
+
+  inputWrapper: {
+    position: "relative" as const,
+    width: "100%",
+  },
+
+  inputAiButton: {
+    position: "absolute" as const,
+    right: "8px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    padding: "0",
+    border: "none",
+    borderRadius: "6px",
+    background: colors.primary,
+    color: "#ffffff",
+    cursor: "pointer",
+    transition: "all 0.2s",
+    boxShadow: theme.shadowMd,
+  } as React.CSSProperties,
+
+  inputAiButtonHover: {
+    background: colors.primaryHover,
+    boxShadow: theme.shadowLg,
+    transform: "translateY(-50%) scale(1.05)",
+  } as React.CSSProperties,
+
+  // Textarea
+  textarea: {
+    width: "100%",
+    minHeight: "120px",
+    padding: "12px 40px 12px 16px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    color: theme.text,
+    background: theme.bg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: "8px",
+    outline: "none",
+    transition: "all 0.2s",
+    fontFamily: "inherit",
+    resize: "vertical" as const,
+  } as React.CSSProperties,
+
+  textareaFocus: {
+    borderColor: colors.primary,
+    boxShadow: `0 0 0 3px ${colors.primary}20`,
+  } as React.CSSProperties,
+
+  textareaWrapper: {
+    position: "relative" as const,
+    width: "100%",
+  },
+
+  textareaAiButton: {
+    position: "absolute" as const,
+    right: "8px",
+    top: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    padding: "0",
+    border: "none",
+    borderRadius: "6px",
+    background: colors.primary,
+    color: "#ffffff",
+    cursor: "pointer",
+    transition: "all 0.2s",
+    boxShadow: theme.shadowMd,
+  } as React.CSSProperties,
+
+  textareaAiButtonHover: {
+    background: colors.primaryHover,
+    boxShadow: theme.shadowLg,
+    transform: "scale(1.05)",
+  } as React.CSSProperties,
+
+  // Button
+  button: {
+    display: "inline-flex" as const,
+    alignItems: "center" as const,
+    justifyContent: "center" as const,
+    gap: "8px",
+    padding: "10px 20px",
+    fontSize: "14px",
+    fontWeight: 500,
+    lineHeight: "1.5",
+    color: "#ffffff",
+    background: colors.primary,
+    border: "none",
+    borderRadius: "8px",
+    cursor: "pointer" as const,
+    transition: "all 0.2s",
+    boxShadow: theme.shadowMd,
+    fontFamily: "inherit",
+  } as React.CSSProperties,
+
+  buttonHover: {
+    background: colors.primaryHover,
+    boxShadow: theme.shadowLg,
+    transform: "translateY(-1px)",
+  } as React.CSSProperties,
+
+  buttonDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed" as const,
+    transform: "none",
+  } as React.CSSProperties,
+
+  // Select
+  select: {
+    width: "100%",
+    padding: "12px 16px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    color: theme.text,
+    background: theme.bg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: "8px",
+    outline: "none",
+    transition: "all 0.2s",
+    fontFamily: "inherit",
+    cursor: "pointer" as const,
+  } as React.CSSProperties,
+
+  selectFocus: {
+    borderColor: colors.primary,
+    boxShadow: `0 0 0 3px ${colors.primary}20`,
+  } as React.CSSProperties,
+
+  // Status Button
   statusButton: {
     display: "inline-flex" as const,
     alignItems: "center" as const,
     justifyContent: "center" as const,
     width: "40px",
     height: "40px",
-    border: "1px solid #e5e7eb",
+    border: `1px solid ${theme.border}`,
     borderRadius: "8px",
-    background: "#ffffff",
-    color: "#1f2937",
+    background: theme.bg,
+    color: theme.text,
     cursor: "pointer" as const,
     transition: "all 0.2s",
-  },
+    boxShadow: theme.shadowMd,
+  } as React.CSSProperties,
 
   statusButtonHover: {
-    background: "#f9fafb",
-    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
-  },
+    background: theme.bgSecondary,
+    boxShadow: theme.shadowLg,
+    transform: "scale(1.05)",
+  } as React.CSSProperties,
 
   statusButtonDisabled: {
     opacity: 0.5,
     cursor: "not-allowed" as const,
-  },
+  } as React.CSSProperties,
 
+  // Tooltip
   tooltip: {
     position: "absolute" as const,
-    top: "calc(100% + 8px)",
-    right: 0,
     zIndex: 1000,
     minWidth: "320px",
     maxWidth: "400px",
     padding: "16px",
-    background: "#ffffff",
-    border: "1px solid #e5e7eb",
-    borderRadius: "8px",
-    boxShadow:
-      "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    background: theme.bg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: "12px",
+    boxShadow: theme.shadowXl,
     fontSize: "12px",
-    color: "#1f2937",
-  },
+    color: theme.text,
+    pointerEvents: "auto" as const,
+  } as React.CSSProperties,
 
   tooltipHeader: {
     fontWeight: 600,
     fontSize: "16px",
     paddingBottom: "12px",
     marginBottom: "12px",
-    borderBottom: "1px solid #e5e7eb",
-    color: "#111827",
-  },
+    borderBottom: `1px solid ${theme.borderLight}`,
+    color: theme.text,
+  } as React.CSSProperties,
 
   tooltipSection: {
     padding: "12px 0",
-    borderTop: "1px solid #f3f4f6",
-  },
+    borderTop: `1px solid ${theme.borderLight}`,
+  } as React.CSSProperties,
 
   tooltipSectionFirst: {
     borderTop: "none",
     paddingTop: 0,
-  },
+  } as React.CSSProperties,
 
   tooltipSubtitle: {
     fontWeight: 600,
     marginBottom: "8px",
-    fontSize: "12px",
-    color: "#111827",
+    fontSize: "11px",
+    color: theme.textSecondary,
     textTransform: "uppercase" as const,
     letterSpacing: "0.05em",
-  },
+  } as React.CSSProperties,
 
   tooltipRow: {
     display: "flex" as const,
@@ -79,35 +302,35 @@ export const aiStyles = {
     gap: "16px",
     marginBottom: "6px",
     alignItems: "center" as const,
-  },
+  } as React.CSSProperties,
 
   tooltipLabel: {
-    color: "#6b7280",
+    color: theme.textSecondary,
     fontSize: "12px",
-  },
+  } as React.CSSProperties,
 
   tooltipValue: {
     fontFamily:
       'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     fontSize: "12px",
-    color: "#111827",
+    color: theme.text,
     fontWeight: 500,
-  },
+  } as React.CSSProperties,
 
   tooltipValueBold: {
     fontWeight: 700,
-    color: "#111827",
-  },
+    color: theme.text,
+  } as React.CSSProperties,
 
   tooltipValueSuccess: {
-    color: "#10b981",
+    color: colors.success,
     fontWeight: 600,
-  },
+  } as React.CSSProperties,
 
   tooltipValueWarning: {
-    color: "#f59e0b",
+    color: colors.warning,
     fontWeight: 600,
-  },
+  } as React.CSSProperties,
 
   tooltipActions: {
     display: "flex" as const,
@@ -115,31 +338,165 @@ export const aiStyles = {
     justifyContent: "space-between" as const,
     paddingTop: "12px",
     marginTop: "8px",
-    borderTop: "1px solid #f3f4f6",
-  },
+    borderTop: `1px solid ${theme.borderLight}`,
+  } as React.CSSProperties,
 
   tooltipLink: {
     flex: 1,
     textAlign: "center" as const,
-    padding: "6px 12px",
-    color: "#3b82f6",
+    padding: "8px 12px",
+    color: colors.primary,
     textDecoration: "none",
     borderRadius: "6px",
     transition: "all 0.2s",
     fontSize: "11px",
     fontWeight: 500,
-    background: "#eff6ff",
-    border: "1px solid #dbeafe",
-  },
+    background: `${colors.primary}10`,
+    border: `1px solid ${colors.primary}30`,
+  } as React.CSSProperties,
+
+  tooltipLinkHover: {
+    background: `${colors.primary}20`,
+    borderColor: colors.primary,
+  } as React.CSSProperties,
+
+  // Chip/Label
+  chip: {
+    display: "inline-flex" as const,
+    alignItems: "center" as const,
+    gap: "4px",
+    padding: "4px 12px",
+    fontSize: "12px",
+    fontWeight: 500,
+    borderRadius: "6px",
+    background: `${colors.primary}10`,
+    color: colors.primary,
+    border: `1px solid ${colors.primary}30`,
+  } as React.CSSProperties,
+
+  // Modal (basic styles)
+  modal: {
+    position: "fixed" as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+    display: "flex" as const,
+    alignItems: "center" as const,
+    justifyContent: "center" as const,
+    padding: "20px",
+    animation: "ai-fadeIn 0.2s ease-in",
+  } as React.CSSProperties,
+
+  modalOverlay: {
+    position: "absolute" as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "rgba(0, 0, 0, 0.5)",
+    backdropFilter: "blur(4px)",
+    WebkitBackdropFilter: "blur(4px)",
+  } as React.CSSProperties,
+
+  modalContent: {
+    position: "relative" as const,
+    width: "100%",
+    maxWidth: "600px",
+    maxHeight: "90vh",
+    overflow: "auto" as const,
+    background: theme.bg,
+    borderRadius: "12px",
+    boxShadow: theme.shadowXl,
+    padding: "0",
+    animation: "ai-slideUp 0.3s ease-out",
+  } as React.CSSProperties,
+
+  modalHeader: {
+    display: "flex" as const,
+    alignItems: "center" as const,
+    justifyContent: "space-between" as const,
+    padding: "20px 24px",
+    borderBottom: `1px solid ${theme.borderLight}`,
+  } as React.CSSProperties,
+
+  modalTitle: {
+    fontSize: "18px",
+    fontWeight: 600,
+    margin: 0,
+    color: theme.text,
+  } as React.CSSProperties,
 
+  modalCloseButton: {
+    display: "flex" as const,
+    alignItems: "center" as const,
+    justifyContent: "center" as const,
+    width: "32px",
+    height: "32px",
+    padding: "0",
+    border: "none",
+    borderRadius: "6px",
+    background: "transparent",
+    color: theme.textSecondary,
+    fontSize: "24px",
+    lineHeight: "1",
+    cursor: "pointer" as const,
+    transition: "all 0.2s",
+  } as React.CSSProperties,
+
+  modalCloseButtonHover: {
+    background: theme.bgSecondary,
+    color: theme.text,
+  } as React.CSSProperties,
+
+  modalBody: {
+    padding: "24px",
+    color: theme.textSecondary,
+    lineHeight: "1.6",
+  } as React.CSSProperties,
+
+  modalFooter: {
+    display: "flex" as const,
+    gap: "12px",
+    justifyContent: "flex-end" as const,
+    padding: "20px 24px",
+    borderTop: `1px solid ${theme.borderLight}`,
+  } as React.CSSProperties,
+
+  modalLabel: {
+    display: "block",
+    marginBottom: "8px",
+    fontSize: "14px",
+    fontWeight: 500,
+    color: theme.text,
+  } as React.CSSProperties,
+
+  modalInputGroup: {
+    marginBottom: "20px",
+  } as React.CSSProperties,
+
+  // Buttons variants
+  buttonSecondary: {
+    background: theme.bgSecondary,
+    color: theme.text,
+    border: `1px solid ${theme.border}`,
+  } as React.CSSProperties,
+
+  buttonSecondaryHover: {
+    background: theme.bgTertiary,
+    borderColor: theme.borderLight,
+  } as React.CSSProperties,
+
+  // Spinner
   spinner: {
     width: "16px",
     height: "16px",
-    border: "2px solid #e5e7eb",
-    borderTopColor: "#3b82f6",
+    border: "2px solid transparent",
+    borderTopColor: "currentColor",
     borderRadius: "50%",
-    animation: "spin 1s linear infinite",
-  },
+    animation: "ai-spin 1s linear infinite",
+  } as React.CSSProperties,
 };
 
 // Inject keyframes animation for spinner
@@ -150,6 +507,81 @@ if (typeof document !== "undefined") {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
     }
+    
+    @keyframes ai-fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    
+    @keyframes ai-slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   `;
   document.head.appendChild(styleSheet);
 }
+
+// Helper function to calculate tooltip position
+export function calculateTooltipPosition(
+  buttonRect: DOMRect,
+  tooltipWidth: number = 350,
+  tooltipHeight: number = 500
+): { top?: string; bottom?: string; left?: string; right?: string } {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const margin = 8;
+
+  const position: {
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+  } = {};
+
+  // Vertical positioning
+  const spaceBelow = viewportHeight - buttonRect.bottom;
+  const spaceAbove = buttonRect.top;
+
+  if (spaceBelow >= tooltipHeight + margin) {
+    // Show below
+    position.top = `calc(100% + ${margin}px)`;
+  } else if (spaceAbove >= tooltipHeight + margin) {
+    // Show above
+    position.bottom = `calc(100% + ${margin}px)`;
+  } else {
+    // Show below anyway (scrollable)
+    position.top = `calc(100% + ${margin}px)`;
+  }
+
+  // Horizontal positioning
+  const spaceRight = viewportWidth - buttonRect.right;
+  const spaceLeft = buttonRect.left;
+
+  if (spaceRight >= tooltipWidth + margin) {
+    // Align to right edge of button
+    position.right = "0";
+  } else if (spaceLeft >= tooltipWidth + margin) {
+    // Align to left edge of button
+    position.left = "0";
+  } else {
+    // Center, but ensure it doesn't go off-screen
+    const centerOffset = (buttonRect.width - tooltipWidth) / 2;
+    const leftPosition = buttonRect.left + centerOffset;
+
+    if (leftPosition < margin) {
+      position.left = `${margin - buttonRect.left}px`;
+    } else if (leftPosition + tooltipWidth > viewportWidth - margin) {
+      position.right = `${margin}px`;
+    } else {
+      position.right = "0";
+    }
+  }
+
+  return position;
+}