@hef2024/llmasaservice-ui 0.16.8

package/src/ChatStatus.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+
+interface ChatStatusProps {
+  isLoading: boolean;
+}
+
+const ChatStatus: React.FC<ChatStatusProps> = ({ isLoading }) => {
+  const [dots, setDots] = useState<string[]>(['', '', '']);
+  const [dotIndex, setDotIndex] = useState<number>(0);
+
+  useEffect(() => {
+    if (isLoading) {
+      const interval = setInterval(() => {
+        setDots((prevDots) => {
+          const newDots = [...prevDots];
+          newDots[dotIndex] = '.';
+          setDotIndex((prevIndex) => (prevIndex + 1) % 3);
+          return newDots;
+        });
+      }, 500);
+
+      return () => clearInterval(interval);
+    } else {
+      setDots(['', '', '']);
+      setDotIndex(0);
+    }
+  }, [isLoading, dotIndex]);
+
+  return (
+    <div className="chat-status">
+      {isLoading ? (
+        <span className="loading-dots">
+          {dots.join('')}
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export default ChatStatus;

package/src/EmailModal.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import "./ChatPanel.css"; // Ensure this file contains the modal styles
+
+interface EmailModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSend: (to: string, from: string) => void;
+  defaultEmail?: string;
+}
+
+const EmailModal: React.FC<EmailModalProps> = ({ isOpen, onClose, onSend, defaultEmail }) => {
+  const [email, setEmail] = useState("");
+  const [emailFrom, setEmailFrom] = useState(defaultEmail || "");
+
+  const handleSend = () => {
+    onSend(email, emailFrom);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <p className="modal-text">
+        Email Addresses
+        <br /> (If multiple, comma separate them)
+        </p>
+        <p>
+          <input
+            type="email"
+            width="100%"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="To email address"
+          />
+        </p>
+        <p>
+          <input
+            type="email"
+            width="100%"
+            value={emailFrom}
+            onChange={(e) => setEmailFrom(e.target.value)}
+            placeholder="From email address (optional)"
+          />
+        </p>
+        <div className="modal-buttons">
+          <button onClick={onClose}>Cancel</button>
+          <button onClick={handleSend}>Send</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmailModal;

package/src/ToolInfoModal.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+import "./ChatPanel.css"; // Reuse styles or create specific ones
+
+interface ToolInfoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  data: { calls: any[]; responses: any[] } | null;
+}
+
+const ToolInfoModal: React.FC<ToolInfoModalProps> = ({
+  isOpen,
+  onClose,
+  data,
+}) => {
+  if (!isOpen || !data) return null;
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div
+        className="modal-content tool-info-modal-content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="tool-info-container">
+          <div className="tool-info-section">
+            <b>Tool Calls</b>
+            <textarea
+              className="tool-info-json"
+              readOnly
+              value={JSON.stringify(data.calls, null, 2)}
+            />
+          </div>
+          <div className="tool-info-section">
+            <b>Tool Responses</b>
+            <textarea
+              className="tool-info-json"
+              readOnly
+              value={JSON.stringify(data.responses, null, 2)}
+            />
+          </div>
+        </div>
+        <div className="modal-buttons">
+          <button onClick={onClose}>Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ToolInfoModal;

package/src/components/ui/Button.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'ghost' | 'outline' | 'destructive';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  children: React.ReactNode;
+}
+
+/**
+ * shadcn-inspired Button component
+ */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = '', variant = 'default', size = 'default', children, ...props }, ref) => {
+    const baseStyles = `
+      ai-button
+      inline-flex items-center justify-center
+      font-medium transition-colors
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
+      disabled:pointer-events-none disabled:opacity-50
+    `.trim().replace(/\s+/g, ' ');
+
+    const variantStyles: Record<string, string> = {
+      default: 'ai-button--primary',
+      secondary: 'ai-button--secondary',
+      ghost: 'ai-button--ghost',
+      outline: 'ai-button--outline',
+      destructive: 'ai-button--destructive',
+    };
+
+    const sizeStyles: Record<string, string> = {
+      default: 'ai-button--default',
+      sm: 'ai-button--sm',
+      lg: 'ai-button--lg',
+      icon: 'ai-button--icon',
+    };
+
+    const classes = [
+      baseStyles,
+      variantStyles[variant] || variantStyles.default,
+      sizeStyles[size] || sizeStyles.default,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <button ref={ref} className={classes} {...props}>
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export default Button;
+
+
+

package/src/components/ui/Dialog.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef } from 'react';
+
+export interface DialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * shadcn-inspired Dialog component
+ */
+export const Dialog: React.FC<DialogProps> = ({
+  isOpen,
+  onClose,
+  title,
+  description,
+  children,
+  className = '',
+}) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Close on escape key
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  // Trap focus within dialog
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    const focusableElements = dialog.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstFocusable = focusableElements[0] as HTMLElement;
+    const lastFocusable = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+    const handleTabKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          event.preventDefault();
+          lastFocusable?.focus();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          event.preventDefault();
+          firstFocusable?.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleTabKey);
+    firstFocusable?.focus();
+
+    return () => document.removeEventListener('keydown', handleTabKey);
+  }, [isOpen]);
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="ai-dialog-overlay" onClick={onClose}>
+      <div
+        ref={dialogRef}
+        className={`ai-dialog ${className}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? 'dialog-title' : undefined}
+        aria-describedby={description ? 'dialog-description' : undefined}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {title && (
+          <div className="ai-dialog-header">
+            <h2 id="dialog-title" className="ai-dialog-title">
+              {title}
+            </h2>
+            {description && (
+              <p id="dialog-description" className="ai-dialog-description">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+        <div className="ai-dialog-content">{children}</div>
+        <button
+          type="button"
+          className="ai-dialog-close"
+          onClick={onClose}
+          aria-label="Close dialog"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 4L4 12M4 4L12 12"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export interface DialogFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const DialogFooter: React.FC<DialogFooterProps> = ({
+  children,
+  className = '',
+}) => {
+  return <div className={`ai-dialog-footer ${className}`}>{children}</div>;
+};
+
+export default Dialog;
+
+
+

package/src/components/ui/Input.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon?: React.ReactNode;
+}
+
+/**
+ * shadcn-inspired Input component
+ */
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className = '', icon, ...props }, ref) => {
+    const baseStyles = 'ai-input';
+    const classes = [baseStyles, className].filter(Boolean).join(' ');
+
+    if (icon) {
+      return (
+        <div className="ai-input-wrapper">
+          <span className="ai-input-icon">{icon}</span>
+          <input ref={ref} className={classes} {...props} />
+        </div>
+      );
+    }
+
+    return <input ref={ref} className={classes} {...props} />;
+  }
+);
+
+Input.displayName = 'Input';
+
+export default Input;
+
+
+

package/src/components/ui/ScrollArea.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react';
+
+export interface ScrollAreaProps {
+  children: React.ReactNode;
+  className?: string;
+  maxHeight?: string | number;
+}
+
+/**
+ * shadcn-inspired ScrollArea component with ref forwarding
+ */
+export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ children, className = '', maxHeight }, ref) => {
+    const style: React.CSSProperties = maxHeight
+      ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }
+      : {};
+
+    return (
+      <div className={`ai-scroll-area ${className}`} style={style} ref={ref}>
+        <div className="ai-scroll-area-viewport">{children}</div>
+      </div>
+    );
+  }
+);
+
+ScrollArea.displayName = 'ScrollArea';
+
+export default ScrollArea;
+

package/src/components/ui/Select.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+export interface SelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * shadcn-inspired Select component
+ */
+export const Select: React.FC<SelectProps> = ({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select...',
+  disabled = false,
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Close on escape
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  const handleSelect = (optionValue: string) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`ai-select ${disabled ? 'ai-select--disabled' : ''} ${className}`}
+    >
+      <button
+        type="button"
+        className="ai-select-trigger"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+      >
+        <span className="ai-select-value">
+          {selectedOption ? (
+            <>
+              {selectedOption.icon && (
+                <span className="ai-select-icon">{selectedOption.icon}</span>
+              )}
+              {selectedOption.label}
+            </>
+          ) : (
+            <span className="ai-select-placeholder">{placeholder}</span>
+          )}
+        </span>
+        <span className="ai-select-chevron">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.5 4.5L6 8L9.5 4.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+      </button>
+
+      {isOpen && (
+        <div className="ai-select-content" role="listbox">
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className={`ai-select-item ${option.value === value ? 'ai-select-item--selected' : ''}`}
+              onClick={() => handleSelect(option.value)}
+              role="option"
+              aria-selected={option.value === value}
+            >
+              {option.icon && <span className="ai-select-item-icon">{option.icon}</span>}
+              <div className="ai-select-item-content">
+                <span className="ai-select-item-label">{option.label}</span>
+                {option.description && (
+                  <span className="ai-select-item-description">{option.description}</span>
+                )}
+              </div>
+              {option.value === value && (
+                <span className="ai-select-item-check">
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.5 6L5 8.5L9.5 3.5"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Select;
+
+
+

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  delay?: number;
+  className?: string;
+}
+
+/**
+ * shadcn-inspired Tooltip component
+ */
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  side = 'right',
+  delay = 300,
+  className = '',
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  const showTooltip = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsVisible(false);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={triggerRef}
+      className={`ai-tooltip-trigger ${className}`}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+    >
+      {children}
+      {isVisible && (
+        <div
+          className={`ai-tooltip ai-tooltip--${side}`}
+          role="tooltip"
+        >
+          <div className="ai-tooltip-content">{content}</div>
+          <div className="ai-tooltip-arrow" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;
+
+
+

package/src/components/ui/index.ts

@@ -0,0 +1,20 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Input } from './Input';
+export type { InputProps } from './Input';
+
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps } from './ScrollArea';
+
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+
+export { Dialog, DialogFooter } from './Dialog';
+export type { DialogProps, DialogFooterProps } from './Dialog';
+
+
+