@gobolt/genesis 0.2.21 → 0.3.0

package/README.md

@@ -8,7 +8,7 @@
 
 [Storybook hosted on Google Cloud](https://genesis-storybook-365607811897.us-central1.run.app/?path=/docs/genesis-design-system-design-tokens-color-tokens--docs)
 
-The GENESIS design system standardizes our colors, fonts, and sizing tokens across all our apps. 
+The GENESIS design system standardizes our colors, fonts, and sizing tokens across all our apps.
 
 It unifies frontend app development around these core libraries:
 
@@ -17,7 +17,6 @@ It unifies frontend app development around these core libraries:
 - [Typescript](https://www.typescriptlang.org/) v5
 - [React](https://react.dev/) v18
 
-
 ## 📦 Development
 
 ```bash
@@ -25,14 +24,14 @@ npm install
 npm start
 ```
 
-To scaffold a new component, run `npm run generate` and add the component name in PascalCase 
+To scaffold a new component, run `npm run generate` and add the component name in PascalCase
 
 example:
+
 ```
 npm run generate RadioGroup
 ```
 
-
 ## 🔨 Usage
 
 Install the GENESIS library
@@ -41,7 +40,7 @@ Install the GENESIS library
 npm install @gobolt/genesis
 ```
 
-The `GenesisProvider` must included within the application as it supplies the Genesis Theme. 
+The `GenesisProvider` must included within the application as it supplies the Genesis Theme.
 
 ```jsx
 import { Button, GenesisProvider } from '@gobolt/genesis;
@@ -65,12 +64,12 @@ The library exports both the components and their types which are documented in
 ## 🧪 Testing
 
 ```
-npm test 
+npm test
 ```
 
-[husky](https://typicode.github.io/husky/) has been configured to automatically run the tests on push to Github and will enforce that all tests pass.  
+[husky](https://typicode.github.io/husky/) has been configured to automatically run the tests on push to Github and will enforce that all tests pass.
 
-## 🚀 Publishing 
+## 🚀 Publishing
 
 This project uses [rollup](https://rollupjs.org/) to create the package and [changesets](https://github.com/changesets/changesets) to manage it's versions. We only need to run changesets when we're ready to release and publish the library.
 
@@ -88,13 +87,13 @@ just deploy
 
 See the .justfile which simplifies this [Storybook GCP script on Notion](https://www.notion.so/gobolt/Deploy-Genesis-Storybook-to-GCP-1759f4303960806e8d88cf1e751cb19d).
 
-requires: [just](https://github.com/casey/just) 
+requires: [just](https://github.com/casey/just)
 
 ```
 brew install just
 ```
 
-## Test the build 
+## Test the build
 
 If you want to test the build before deploying...
 
@@ -102,4 +101,4 @@ If you want to test the build before deploying...
 rm -rf storybook-static
 npm build-storybook
 python3 -m http.server 6006 -d storybook-static
-```
+```

package/dist/_virtual/index6.cjs

@@ -1,6 +1,6 @@
 "use strict";
 var _commonjsHelpers = require("./_commonjsHelpers.cjs");
-var index = require("../node_modules/debounce/index.cjs");
-var debounceExports = /* @__PURE__ */ index.__require();
-var debounce = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(debounceExports);
-module.exports = debounce;
+var index = require("../node_modules/style-to-js/cjs/index.cjs");
+var cjsExports = index.__require();
+var styleToJs = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(cjsExports);
+module.exports = styleToJs;

package/dist/_virtual/index6.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireDebounce } from "../node_modules/debounce/index.js";
-var debounceExports = /* @__PURE__ */ requireDebounce();
-var debounce = /* @__PURE__ */ getDefaultExportFromCjs(debounceExports);
+import { __require as requireCjs } from "../node_modules/style-to-js/cjs/index.js";
+var cjsExports = requireCjs();
+var styleToJs = /* @__PURE__ */ getDefaultExportFromCjs(cjsExports);
 export {
-  debounce as default
+  styleToJs as default
 };

package/dist/_virtual/index7.cjs

@@ -1,3 +1,6 @@
 "use strict";
-var debounce = { exports: {} };
-exports.__module = debounce;
+var _commonjsHelpers = require("./_commonjsHelpers.cjs");
+var index = require("../node_modules/extend/index.cjs");
+var extendExports = index.__require();
+var extend = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(extendExports);
+module.exports = extend;

package/dist/_virtual/index7.js

@@ -1,4 +1,7 @@
-var debounce = { exports: {} };
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireExtend } from "../node_modules/extend/index.js";
+var extendExports = requireExtend();
+var extend = /* @__PURE__ */ getDefaultExportFromCjs(extendExports);
 export {
-  debounce as __module
+  extend as default
 };

package/dist/_virtual/index8.cjs

@@ -0,0 +1,3 @@
+"use strict";
+var cjs = {};
+exports.__exports = cjs;

package/dist/_virtual/index8.js

@@ -0,0 +1,4 @@
+var cjs = {};
+export {
+  cjs as __exports
+};

package/dist/_virtual/utilities.cjs

@@ -0,0 +1,3 @@
+"use strict";
+var utilities = {};
+exports.__exports = utilities;

package/dist/_virtual/utilities.js

@@ -0,0 +1,4 @@
+var utilities = {};
+export {
+  utilities as __exports
+};

package/dist/components/Avatar/styles.d.ts

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledAvatarProps {
+interface StyledAvatarProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -11,7 +11,7 @@ export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
 }, type?: string, state?: string) => string;
 export declare const Avatar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>, "ref"> & {
     ref?: import('react').Ref<HTMLSpanElement>;
-}, StyledAvatarProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>> & {
+}, StyledAvatarProperties>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>> & {
     Group: import('react').FC<import('antd/es/avatar/AvatarGroup').AvatarGroupProps>;
 }, keyof import('react').Component<any, {}, any>>;
 export {};

package/dist/components/Badge/__stories__/Badge.stories.d.ts

@@ -10,6 +10,7 @@ export declare const Warning: Story;
 export declare const Generic: Story;
 export declare const Hollow: Story;
 export declare const Disabled: Story;
+export declare const CompareSeveralBadges: Story;
 export declare const Icon: Story;
 export declare const WithClose: Story;
 export declare const NoIconNoCloseNoHover: Story;

package/dist/components/Badge/styles.cjs

@@ -7,7 +7,8 @@ const getBorderColor = (theme, state) => {
   return theme.colors.status[state].surface;
 };
 const getGenesisClass = (theme, state, label, disabled, $backgroundColor, $hasHover) => `
-  display: inline-flex; // inline-flex is used to prevent the badge from taking up the full width of the container
+  display: inline-flex; 
+  align-self: inherit;
   gap: 4px;
   justify-content: center;
   align-items: center;

package/dist/components/Badge/styles.d.ts

@@ -1,6 +1,6 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
 import { State } from './Badge';
-interface StyledBadgeProps {
+interface StyledBadgeProperties {
     theme?: GenesisTheme;
     state?: State;
     label?: string;
@@ -9,5 +9,5 @@ interface StyledBadgeProps {
     $hasHover?: boolean;
 }
 export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, $backgroundColor?: string, $hasHover?: boolean) => string;
-export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProps>> & string;
+export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProperties>> & string;
 export {};

package/dist/components/Badge/styles.js

@@ -6,7 +6,8 @@ const getBorderColor = (theme, state) => {
   return theme.colors.status[state].surface;
 };
 const getGenesisClass = (theme, state, label, disabled, $backgroundColor, $hasHover) => `
-  display: inline-flex; // inline-flex is used to prevent the badge from taking up the full width of the container
+  display: inline-flex; 
+  align-self: inherit;
   gap: 4px;
   justify-content: center;
   align-items: center;

package/dist/components/Breadcrumb/styles.cjs

@@ -58,7 +58,9 @@ const BreadcrumbWrapper = styled.div`
     `}
   opacity: ${({ $isDisabled }) => $isDisabled ? 0.5 : 1};
 `;
-const Breadcrumb = styled(Breadcrumb$1)`
+const Breadcrumb = styled(
+  Breadcrumb$1
+)`
   ${({ theme, breakpoint }) => theme && getGenesisClass(theme, breakpoint)}
 `;
 exports.Breadcrumb = Breadcrumb;

package/dist/components/Breadcrumb/styles.d.ts

@@ -1,17 +1,17 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledBreadcrumbProps {
+interface StyledBreadcrumbProperties {
     theme?: GenesisTheme;
     $isDisabled?: boolean;
 }
-interface StyledBreadcrumbComponentProps extends StyledBreadcrumbProps {
+interface StyledBreadcrumbComponentProperties extends StyledBreadcrumbProperties {
     type?: string;
     state?: string;
     breakpoint?: string;
     role?: string;
 }
 export declare const getGenesisClass: ({ colors, typography }: GenesisTheme, breakpoint?: string) => string;
-export declare const BreadcrumbWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbProps>> & string;
-export declare const Breadcrumb: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('antd').BreadcrumbProps<import('antd/es/_util/type').AnyObject>, StyledBreadcrumbComponentProps>> & string & Omit<{
+export declare const BreadcrumbWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbProperties>> & string;
+export declare const Breadcrumb: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('antd').BreadcrumbProps<import('antd/es/_util/type').AnyObject>, StyledBreadcrumbComponentProperties>> & string & Omit<{
     <T extends import('antd/es/_util/type').AnyObject = import('antd/es/_util/type').AnyObject>(props: import('antd').BreadcrumbProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     Item: React.FC<import('antd').BreadcrumbItemProps> & {
         __ANT_BREADCRUMB_ITEM: boolean;

package/dist/components/Breadcrumb/styles.js

@@ -56,7 +56,9 @@ const BreadcrumbWrapper = styled.div`
     `}
   opacity: ${({ $isDisabled }) => $isDisabled ? 0.5 : 1};
 `;
-const Breadcrumb = styled(Breadcrumb$1)`
+const Breadcrumb = styled(
+  Breadcrumb$1
+)`
   ${({ theme, breakpoint }) => theme && getGenesisClass(theme, breakpoint)}
 `;
 export {

package/dist/components/Button/Button.d.ts

@@ -1,8 +1,8 @@
 import { default as React, MouseEvent } from 'react';
-import { ButtonProps as AntButtonProps } from 'antd/es/button';
+import { ButtonProps as AntButtonProperties } from 'antd/es/button';
 import { STATE } from '../../constants';
 type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
-export interface ButtonProps extends Omit<AntButtonProps, "type" | "size"> {
+export interface ButtonProps extends Omit<AntButtonProperties, "type" | "size"> {
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     children?: React.ReactNode;
     themeType?: ButtonThemeType;

package/dist/components/Button/icon-button-styles.d.ts

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledIconButtonProps {
+interface StyledIconButtonProperties {
     theme?: GenesisTheme;
     $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
@@ -8,5 +8,5 @@ interface StyledIconButtonProps {
     $isSelected?: boolean;
     size?: "small" | "normal" | "large";
 }
-export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledIconButtonProps>> & string;
+export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledIconButtonProperties>> & string;
 export {};

package/dist/components/Button/styles.d.ts

@@ -1,6 +1,6 @@
-import { ButtonProps as AntButtonProps } from 'antd/es/button';
+import { ButtonProps as AntButtonProperties } from 'antd/es/button';
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledButtonProps extends Omit<AntButtonProps, "type" | "size"> {
+interface StyledButtonProperties extends Omit<AntButtonProperties, "type" | "size"> {
     theme?: GenesisTheme;
     $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
@@ -8,9 +8,9 @@ interface StyledButtonProps extends Omit<AntButtonProps, "type" | "size"> {
     $isIconButton?: boolean;
     size?: "small" | "normal" | "large";
 }
-export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntButtonProperties & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
     ref?: import('react').Ref<HTMLAnchorElement | HTMLButtonElement>;
-}, StyledButtonProps>> & string & Omit<import('react').ForwardRefExoticComponent<AntButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
+}, StyledButtonProperties>> & string & Omit<import('react').ForwardRefExoticComponent<AntButtonProperties & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
     Group: import('react').FC<import('antd/es/button').ButtonGroupProps>;
 }, keyof import('react').Component<any, {}, any>>;
 export {};

package/dist/components/Card/styles.d.ts

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledCardProps {
+interface StyledCardProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -11,5 +11,5 @@ export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
 }, type?: string, state?: string) => string;
 export declare const Card: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').CardProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: import('react').Ref<HTMLDivElement>;
-}, StyledCardProps>> & string & Omit<import('antd/es/card').CardInterface, keyof import('react').Component<any, {}, any>>;
+}, StyledCardProperties>> & string & Omit<import('antd/es/card').CardInterface, keyof import('react').Component<any, {}, any>>;
 export {};

package/dist/components/Chat/Chat.cjs

@@ -0,0 +1,247 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+var index = require("../../node_modules/socket.io-client/build/esm/index.cjs");
+var styled = require("styled-components");
+var Message = require("./Message.cjs");
+var Typography = require("../Typography/Typography.cjs");
+var Input = require("../Input/Input.cjs");
+var Button = require("../Button/Button.cjs");
+const ChatContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 540px;
+  overflow: hidden;
+`;
+const HeroContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({ $isVisible }) => $isVisible ? 1 : 0};
+  transition: opacity 0.3s ease;
+`;
+styled.h1`
+  font-family: "Helvetica", "Arial", sans-serif;
+  color: teal;
+  font-size: 24px;
+  text-align: center;
+`;
+const Subtitle = styled.p`
+  font-family: "Helvetica", "Arial", sans-serif;
+  color: #666;
+  font-size: 16px;
+  text-align: center;
+`;
+const ErrorMessage = styled(Subtitle)`
+  color: red;
+`;
+const InputContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+`;
+const ChatButton = styled(Button)`
+  display: flex;
+  justify-content: flex-end;
+  margin: 16px;
+`;
+const MessageList = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+`;
+const Chat = ({
+  socketUrl = "http://localhost:3000",
+  isOpen = false,
+  messageHistory = [],
+  title = null,
+  isSimulated = false
+}) => {
+  const [isChatOpen, setIsChatOpen] = React.useState(isOpen);
+  const [message, setMessage] = React.useState("");
+  const [messages, setMessages] = React.useState(messageHistory);
+  const [serverStatus, setServerStatus] = React.useState("unknown");
+  const [serverError, setServerError] = React.useState("");
+  const socketRef = React.useRef(null);
+  const messageListRef = React.useRef(null);
+  const serverReadyRef = React.useRef(false);
+  const handle = "user";
+  const [isLocked, setIsLocked] = React.useState(false);
+  React.useEffect(() => {
+    if (isSimulated) return;
+    console.log("Connecting to socket server at:", socketUrl);
+    socketRef.current = index.io(socketUrl, {
+      extraHeaders: {
+        "Access-Control-Allow-Origin": "*"
+      }
+    });
+    const socket = socketRef.current;
+    socket.on("connect", () => {
+      console.log("Socket connected successfully");
+    });
+    socket.on("connect_error", (error) => {
+      console.error("Socket connection error:", error);
+      setServerError("Failed to connect to server");
+      setServerStatus("error");
+      serverReadyRef.current = false;
+    });
+    socket.on("new connection", () => {
+      console.log("New connection established");
+    });
+    socket.on("server-ready", () => {
+      console.log("Server is ready");
+      setServerError("");
+      setServerStatus("ready");
+      serverReadyRef.current = true;
+    });
+    socket.on("message", (newMessage) => {
+      setMessages((prev) => {
+        if (newMessage.sender === "bot") {
+          let replaced = false;
+          const updated = prev.map((msg) => {
+            if (msg.isThinking && !replaced) {
+              replaced = true;
+              return { ...newMessage, isThinking: false };
+            }
+            return msg;
+          });
+          setIsLocked(false);
+          return replaced ? updated : [...prev, newMessage];
+        }
+        const lastUserMsg = [...prev].reverse().find((msg) => msg.sender === "user");
+        if (lastUserMsg && lastUserMsg.content === newMessage.content) {
+          return prev;
+        }
+        return [...prev, newMessage];
+      });
+    });
+    socket.on("update-bot-message", (updatedData) => {
+      console.log("Received bot message update:", updatedData);
+      setMessages(
+        (prev) => prev.map(
+          (message2) => message2.id === updatedData.id ? { ...updatedData } : message2
+        )
+      );
+    });
+    socket.on("error", (error) => {
+      console.error("Socket error:", error);
+      setServerError("Server error occurred");
+    });
+    socket.onAny((eventName, ...args) => {
+      console.log(`Socket event received: ${eventName}`, args);
+    });
+    const timeoutId = setTimeout(() => {
+      if (!serverReadyRef.current) {
+        console.log("Server status check failed");
+        setServerError("Please check the server");
+        setServerStatus("error");
+      }
+    }, 2e3);
+    return () => {
+      console.log("Disconnecting socket");
+      socket.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [isSimulated, socketUrl]);
+  React.useEffect(() => {
+    if (messageListRef.current) {
+      messageListRef.current.scrollTo({
+        top: messageListRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [messages]);
+  const handleKeyDown = (event) => {
+    var _a;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      sendMessage();
+    } else {
+      (_a = socketRef.current) == null ? void 0 : _a.emit("typing");
+    }
+  };
+  const sendMessage = () => {
+    var _a;
+    if (!message.trim() || isLocked) return;
+    const userMessage = {
+      content: message,
+      sender: handle,
+      id: `id_${Date.now()}`,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const thinkingMessage = {
+      content: "",
+      sender: "bot",
+      id: `id_${Date.now()}_thinking`,
+      isThinking: true,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setIsLocked(true);
+    setMessages((prev) => [...prev, thinkingMessage]);
+    if (!((_a = socketRef.current) == null ? void 0 : _a.connected)) {
+      setServerError("Not connected to server");
+      setIsLocked(false);
+      return;
+    }
+    socketRef.current.emit("message", userMessage);
+    setTimeout(() => {
+      setMessages(
+        (prev) => prev.map(
+          (msg) => msg.isThinking ? { ...msg, content: "Processing your message..." } : msg
+        )
+      );
+    }, 300);
+    setTimeout(() => {
+      setMessages((prev) => prev.filter((msg) => !msg.isThinking));
+      setServerError("No response from server");
+      setIsLocked(false);
+    }, 1e4);
+    setMessage("");
+  };
+  const toggleChat = () => {
+    setIsChatOpen(!isChatOpen);
+  };
+  const handleInputChange = (e) => {
+    setMessage(e.payload.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ChatContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HeroContainer, { $isVisible: !isChatOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading3", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: "Click the Chat Icon below to begin" }),
+      serverError && /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: serverError })
+    ] }) }),
+    isChatOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HeroContainer, { $isVisible: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading2", children: title }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(MessageList, { ref: messageListRef, children: messages.map((msg) => /* @__PURE__ */ jsxRuntime.jsx(
+        Message,
+        {
+          message: msg.content,
+          handle: msg.sender,
+          isThinking: msg.isThinking
+        },
+        msg.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(InputContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            type: "text",
+            value: message,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            placeholder: "Type a message & press Enter or Send",
+            disabled: isLocked
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: sendMessage, disabled: isLocked, children: "Send" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(ChatButton, { onClick: toggleChat, children: "Chat" })
+  ] });
+};
+module.exports = Chat;

package/dist/components/Chat/Chat.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { default as Message } from './Message';
+type Message = {
+    id: string;
+    content: string;
+    sender: string;
+    isThinking?: boolean;
+    timestamp: string;
+};
+export interface ChatProps {
+    socketUrl: string;
+    isOpen: boolean;
+    messageHistory: Array<Message>;
+    title?: string;
+    isSimulated?: boolean;
+}
+declare const Chat: FC<ChatProps>;
+export default Chat;