lulichat 1.0.2 → 1.0.3

package/src/components/ChatWidget.tsx

@@ -1,198 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-  LuliChatConfig,
-  ChatState,
-  ContactInfo,
-  CompanyInfo,
-  ChatSession,
-} from "../types";
-import { LuliChatAPI } from "@/utils/api";
-import { ContactForm } from "./ContactForm";
-import { ChatInterface } from "./ChatInterface";
-import { Loader, MessageCircle } from "./ui/Icons";
-import Button from "./ui/Button";
-import Input from "./ui/Input";
-import { Attachment, Send } from "./ui/Icons";
-
-interface ChatWidgetProps {
-  config: LuliChatConfig;
-}
-
-export const ChatWidget: React.FC<ChatWidgetProps> = ({ config }) => {
-  const [chatState, setChatState] = useState<ChatState>("contact-form");
-  const [companyInfo, setCompanyInfo] = useState<CompanyInfo["data"] | null>(
-    null
-  );
-  const [chatSession, setChatSession] = useState<ChatSession | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [open, setOpen] = React.useState(false);
-
-  const api = new LuliChatAPI(config);
-
-  useEffect(() => {
-    loadCompanyInfo();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config]);
-
-  const loadCompanyInfo = async () => {
-    try {
-      const info = await api.getCompanyInfo();
-      setCompanyInfo(info.data);
-    } catch (err) {
-      setError("Failed to load chat configuration");
-      console.error("Failed to load company info:", err);
-    }
-  };
-
-  const handleContactSubmit = async (contactInfo: ContactInfo) => {
-    setIsLoading(true);
-    try {
-      const response = await api.submitContactInfo(contactInfo);
-      const session: ChatSession = {
-        id: response.sessionId,
-        token: response.token,
-        isActive: true,
-      };
-      setChatSession(session);
-      setChatState("chat");
-    } catch (err) {
-      setError("Failed to start chat. Please try again.");
-      console.error("Failed to submit contact info:", err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const startAnonymousChat = async () => {
-    setIsLoading(true);
-    try {
-      const response = await api.startAnonymousChat();
-      const session: ChatSession = {
-        id: response.sessionId,
-        token: response.token,
-        isActive: true,
-      };
-      setChatSession(session);
-      setChatState("chat");
-    } catch (err) {
-      setError("Failed to start chat. Please try again.");
-      console.error("Failed to start anonymous chat:", err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCloseChat = () => {
-    setChatState("closed");
-    setChatSession(null);
-    setError(null);
-  };
-
-  console.log({ companyInfo });
-
-  return (
-    <div className={`lulichat lulichat-${config.position}`}>
-      {open && (
-        <div className="lulichat-main">
-          {error && (
-            <div className="p-4 bg-destructive/10 border-b">
-              <p className="text-sm text-destructive">{error}</p>
-              <button onClick={() => setError(null)} className="mt-2">
-                Retry
-              </button>
-            </div>
-          )}
-
-          <ContactForm
-            companyName={companyInfo?.name!}
-            onSubmit={handleContactSubmit}
-            onSkip={config.allowAnonymous ? startAnonymousChat : undefined}
-            allowAnonymous={config.allowAnonymous || false}
-            isLoading={isLoading}
-          />
-
-          <div style={{ padding: 16 }}>
-            <div
-              style={{
-                display: "flex",
-                gap: 10,
-                flexWrap: "wrap",
-              }}
-            >
-              {companyInfo?.queues.map((queue) => {
-                return (
-                  <div className="lulichat-tag" key={queue.id}>
-                    {queue.name?.toLocaleLowerCase()}
-                  </div>
-                );
-              })}
-            </div>
-
-            <div
-              style={{
-                height: 2,
-                backgroundColor: "hsl(var(--border))",
-                marginBlock: 16,
-              }}
-            />
-
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                columnGap: 10,
-              }}
-              className="form-control"
-            >
-              <Input
-                name="message"
-                autoComplete="off"
-                style={{ border: "none", paddingInline: 0 }}
-                placeholder="What can we help you with ?."
-              />
-              <div className="lulichat-btn-group">
-                <Button style={{ color: "#00000080" }} size="icon">
-                  <Attachment height={24} />
-                </Button>
-                <Button style={{ color: "#00000080" }} size="icon">
-                  <Send />
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {chatState === "chat" && chatSession && companyInfo && (
-            <ChatInterface
-              session={chatSession}
-              companyInfo={companyInfo}
-              onClose={handleCloseChat}
-            />
-          )}
-        </div>
-      )}
-
-      <Button
-        onClick={() => setOpen(!open)}
-        className=""
-        shape="circle"
-        size="icon"
-        style={{
-          backgroundColor: config.primaryColor,
-          height: "4rem",
-          width: "4rem",
-          padding: 0,
-          color: "#fff",
-          alignSelf: "end",
-        }}
-        disabled={!companyInfo && !error}
-      >
-        {!companyInfo && !error ? (
-          <Loader />
-        ) : (
-          <MessageCircle height={40} width={40} />
-        )}
-      </Button>
-    </div>
-  );
-};

package/src/components/ContactForm.tsx

@@ -1,155 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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;