@lastbrain/ai-ui-react 1.0.7 → 1.0.9

package/src/styles/inline.ts

@@ -0,0 +1,587 @@
+/**
+ * Inline styles for AI UI components
+ * 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 ${theme.border}`,
+    borderRadius: "8px",
+    background: theme.bg,
+    color: theme.text,
+    cursor: "pointer" as const,
+    transition: "all 0.2s",
+    boxShadow: theme.shadowMd,
+  } as React.CSSProperties,
+
+  statusButtonHover: {
+    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,
+    zIndex: 1000,
+    minWidth: "320px",
+    maxWidth: "400px",
+    padding: "16px",
+    background: theme.bg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: "12px",
+    boxShadow: theme.shadowXl,
+    fontSize: "12px",
+    color: theme.text,
+    pointerEvents: "auto" as const,
+  } as React.CSSProperties,
+
+  tooltipHeader: {
+    fontWeight: 600,
+    fontSize: "16px",
+    paddingBottom: "12px",
+    marginBottom: "12px",
+    borderBottom: `1px solid ${theme.borderLight}`,
+    color: theme.text,
+  } as React.CSSProperties,
+
+  tooltipSection: {
+    padding: "12px 0",
+    borderTop: `1px solid ${theme.borderLight}`,
+  } as React.CSSProperties,
+
+  tooltipSectionFirst: {
+    borderTop: "none",
+    paddingTop: 0,
+  } as React.CSSProperties,
+
+  tooltipSubtitle: {
+    fontWeight: 600,
+    marginBottom: "8px",
+    fontSize: "11px",
+    color: theme.textSecondary,
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.05em",
+  } as React.CSSProperties,
+
+  tooltipRow: {
+    display: "flex" as const,
+    justifyContent: "space-between" as const,
+    gap: "16px",
+    marginBottom: "6px",
+    alignItems: "center" as const,
+  } as React.CSSProperties,
+
+  tooltipLabel: {
+    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: theme.text,
+    fontWeight: 500,
+  } as React.CSSProperties,
+
+  tooltipValueBold: {
+    fontWeight: 700,
+    color: theme.text,
+  } as React.CSSProperties,
+
+  tooltipValueSuccess: {
+    color: colors.success,
+    fontWeight: 600,
+  } as React.CSSProperties,
+
+  tooltipValueWarning: {
+    color: colors.warning,
+    fontWeight: 600,
+  } as React.CSSProperties,
+
+  tooltipActions: {
+    display: "flex" as const,
+    gap: "8px",
+    justifyContent: "space-between" as const,
+    paddingTop: "12px",
+    marginTop: "8px",
+    borderTop: `1px solid ${theme.borderLight}`,
+  } as React.CSSProperties,
+
+  tooltipLink: {
+    flex: 1,
+    textAlign: "center" as const,
+    padding: "8px 12px",
+    color: colors.primary,
+    textDecoration: "none",
+    borderRadius: "6px",
+    transition: "all 0.2s",
+    fontSize: "11px",
+    fontWeight: 500,
+    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 transparent",
+    borderTopColor: "currentColor",
+    borderRadius: "50%",
+    animation: "ai-spin 1s linear infinite",
+  } as React.CSSProperties,
+};
+
+// Inject keyframes animation for spinner
+if (typeof document !== "undefined") {
+  const styleSheet = document.createElement("style");
+  styleSheet.textContent = `
+    @keyframes ai-spin {
+      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;
+}