lulichat 1.0.1

package/src/components/ContactForm.tsx

@@ -0,0 +1,155 @@
+import { ContactInfo } from "@/types";
+import React, { useState } from "react";
+import Input from "./ui/Input";
+import Form from "./ui/Form";
+import { DropdownArrow, Hello, Loader } from "./ui/Icons";
+import Button from "./ui/Button";
+
+interface ContactFormProps {
+  companyName: string;
+  onSubmit: (contactInfo: ContactInfo) => void;
+  onSkip?: () => void;
+  allowAnonymous: boolean;
+  isLoading: boolean;
+}
+
+export const ContactForm: React.FC<ContactFormProps> = ({
+  companyName,
+  onSubmit,
+  onSkip,
+  allowAnonymous,
+  isLoading,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [formData, setFormData] = useState<ContactInfo>({
+    name: "",
+    email: "",
+    phone: "",
+    company: "",
+  });
+
+  const [errors, setErrors] = useState<Partial<ContactInfo>>({});
+  const [values, setValues] = React.useState<Record<string, string>>({
+    email: "",
+    name: "",
+  });
+
+  const validateForm = () => {
+    const newErrors: Partial<ContactInfo> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = "Name is required";
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = "Email is required";
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = "Email is invalid";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validateForm()) {
+      onSubmit(formData);
+    }
+  };
+
+  const handleInputChange = (field: keyof ContactInfo, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
+  };
+
+  return (
+    <Form
+      autoComplete="off"
+      onSubmit={handleSubmit}
+      onValuesChange={setValues}
+      className="lulichat-contact-form"
+    >
+      <div className="lulichat-form-header">
+        <div
+          style={{
+            marginBottom: "20px",
+            display: "flex",
+            alignItems: "end",
+            columnGap: 8,
+          }}
+        >
+          <Hello
+            style={{ display: "block" }}
+            color="#DEDEDE6A"
+            height={40}
+            width={50}
+          />
+          <h3 style={{ fontWeight: 500 }}>Hello,</h3>
+        </div>
+        <h3 style={{ marginBottom: 8 }} className="lulichat-title">
+          Welcome to {companyName} Live Chat
+        </h3>
+        <p
+          role="button"
+          onClickCapture={() => setOpen(!open)}
+          style={{
+            textDecoration: "underline",
+            lineHeight: "1rem",
+            cursor: "pointer",
+          }}
+        >
+          Please provide your details for a better support experience{" "}
+          <DropdownArrow
+            style={{
+              display: "inline-block",
+              marginBottom: -2,
+            }}
+            height={20}
+            width={20}
+          />
+        </p>
+      </div>
+      <div className={`lulichat-form-group${open ? " open" : ""}`}>
+        <Form.Item error={errors.name} label="Name (Optional)" name="name">
+          <Input
+            id="name"
+            placeholder="Enter your name"
+            type="text"
+            value={formData.name}
+            onChange={(e) => handleInputChange("name", e.target.value)}
+            className={"transparent" + (errors.name ? " error" : "")}
+          />
+        </Form.Item>
+
+        <Form.Item name="email" error={errors.email} label="Email">
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter your valid email"
+            value={formData.email}
+            onChange={(e) => handleInputChange("email", e.target.value)}
+            className={"transparent" + (errors.name ? " error" : "")}
+          />
+        </Form.Item>
+        <Button
+          type="submit"
+          disabled={isLoading || !values.email}
+          style={{ width: "100%", marginTop: 10 }}
+          className="lulichat-contact-form-btn"
+        >
+          {isLoading ? (
+            <>
+              <Loader />
+              Submitting...
+            </>
+          ) : (
+            "Submit"
+          )}
+        </Button>
+      </div>
+    </Form>
+  );
+};

package/src/components/LuliChat.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { ChatWidget } from "./ChatWidget";
+import { LuliChatConfig } from "../types";
+
+interface LuliChatProps {
+  apiKey: string;
+  baseUrl?: string;
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+  primaryColor?: string;
+  companyName?: string;
+  welcomeMessage?: string;
+  requireContactInfo?: boolean;
+  allowAnonymous?: boolean;
+}
+
+export const LuliChat: React.FC<LuliChatProps> = ({
+  apiKey,
+  baseUrl,
+  position = "bottom-right",
+  primaryColor = "#007bff",
+  companyName = "Support",
+  welcomeMessage = "Hello! How can we help you today?",
+  requireContactInfo = true,
+  allowAnonymous = true,
+}) => {
+  const config: LuliChatConfig = {
+    apiKey,
+    baseUrl,
+    position,
+    primaryColor,
+    companyName,
+    welcomeMessage,
+    requireContactInfo,
+    allowAnonymous,
+  };
+
+  if (!apiKey) {
+    console.error("LuliChat: API key is required");
+    return null;
+  }
+
+  return <ChatWidget config={config} />;
+};
+
+// Export all types and components for external use
+export * from "../types";
+export { LuliChatAPI } from "../utils/api";
+export { ChatSocket } from "../lib/socket";

package/src/components/ui/Button.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import clsx from "clsx";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | "primary"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+  size?: "md" | "sm" | "lg" | "icon";
+  shape?: "circle" | "rounded" | "none";
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "outline",
+      size = "md",
+      shape = "rounded",
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        className={clsx(
+          "lulichat-btn",
+          `lulichat-btn-${variant}`,
+          `lulichat-btn-${size}`,
+          `lulichat-btn-${shape}`,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export default Button;

package/src/components/ui/Form.tsx

@@ -0,0 +1,174 @@
+import { cn } from "@/utils";
+import React, { useRef, useImperativeHandle, useCallback } from "react";
+import Input from "./Input";
+
+interface FormProps<T> extends React.FormHTMLAttributes<HTMLFormElement> {
+  onValuesChange?: (values: T) => void;
+  initialValues?: T;
+  onFinish?: (values: T) => void;
+}
+
+export interface FormRefObject<T> {
+  getValues(): T;
+  getFieldValue: <K extends keyof T>(fieldName: K) => T[K];
+  elementRef: () => HTMLFormElement | null;
+  setFieldValue: <K extends keyof T>(fieldName: K, value: T[K]) => void;
+}
+
+const FormContext = React.createContext<FormRefObject<any> | undefined>(
+  undefined
+);
+
+type FormComponent = React.ForwardRefExoticComponent<
+  FormProps<Record<string, any>> &
+    React.RefAttributes<FormRefObject<Record<string, any>>>
+> & {
+  Item: typeof FormItem;
+  Label: typeof FormLabel;
+  useForm: typeof useForm;
+};
+
+const Form: FormComponent = React.forwardRef(
+  <T extends Record<string, any>>(
+    { children, onValuesChange, initialValues, ...props }: FormProps<T>,
+    ref: React.Ref<FormRefObject<T>>
+  ) => {
+    const values = useRef<T>(initialValues || ({} as T));
+    const self = useRef<HTMLFormElement>(null);
+
+    const setFieldValue = useCallback(
+      <K extends keyof T>(fieldName: K, value: T[K]) => {
+        values.current[fieldName] = value;
+        if (onValuesChange) onValuesChange({ ...values.current });
+      },
+      [onValuesChange]
+    );
+
+    const methods: FormRefObject<T> = {
+      getValues: () => values.current!,
+      getFieldValue: (fieldName) => values.current?.[fieldName]!,
+      elementRef: () => self.current,
+      setFieldValue,
+    };
+
+    useImperativeHandle(ref, () => methods);
+
+    return (
+      <FormContext.Provider value={methods}>
+        <form {...props} ref={self} onSubmit={props.onSubmit}>
+          {children}
+        </form>
+      </FormContext.Provider>
+    );
+  }
+) as FormComponent;
+
+interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  name?: string;
+  children?: React.ReactNode;
+  label?: string;
+  required?: boolean;
+  error?: string;
+}
+
+const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
+  ({ name, children, ...props }, ref) => {
+    const context = React.useContext(FormContext)!;
+
+    const handleChange = function (
+      this: React.ReactElement<
+        React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>
+      >,
+      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) {
+      if (context && name) {
+        context.setFieldValue(name, e.target.value);
+      }
+
+      this.props.onChange?.(e);
+    };
+
+    // Clone children and inject value and onChange if name is provided
+    const enhancedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && name && child.type === Input) {
+        let _child = child as React.ReactElement<
+          React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>
+        >;
+        return React.cloneElement(_child, {
+          ..._child.props,
+          name,
+          value: context?.getFieldValue(name) ?? "",
+          onChange: handleChange.bind(_child),
+          required: props.required,
+        });
+      }
+      return child;
+    });
+
+    const _props = Object.create(props);
+    delete _props.required;
+    delete _props.label;
+
+    return (
+      <div className="lulichat-form-item" ref={ref} {..._props}>
+        {props.label && (
+          <FormLabel htmlFor={name} required={props.required}>
+            {props.label}
+          </FormLabel>
+        )}
+        {enhancedChildren}
+        {props.error && <p className="error">{props.error}</p>}
+      </div>
+    );
+  }
+);
+
+interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean;
+  htmlFor?: string;
+}
+
+const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(
+  (props, ref) => {
+    const required = props.required;
+    const children = props.children;
+
+    return (
+      <label
+        {...props}
+        className={cn("lulichat-form-label", props.className)}
+        ref={ref}
+      >
+        {children}
+        {required && <b style={{ color: "red" }}>*</b>}
+      </label>
+    );
+  }
+);
+
+const useForm = <T,>(initialValues: T) => {
+  const values = useRef<T>(initialValues || ({} as T));
+  const self = useRef<HTMLFormElement>(null);
+
+  const setFieldValue = useCallback(
+    <K extends keyof T>(fieldName: K, value: T[K]) => {
+      values.current[fieldName] = value;
+    },
+    []
+  );
+
+  const methods: FormRefObject<T> = {
+    getValues: () => values.current!,
+    getFieldValue: (fieldName) => values.current?.[fieldName]!,
+    elementRef: () => self.current,
+    setFieldValue,
+  };
+
+  return [methods];
+};
+
+Form.Item = FormItem;
+Form.Label = FormLabel;
+Form.useForm = useForm;
+
+export default Form;