@agentiffai/design 0.1.2 → 0.1.4

package/dist/copilotkit/index.js

@@ -1,10 +1,792 @@
-import { AssistantThinking, AssistantMessage, UserMessage, ChatInput, Header, Window, Messages } from '../chunk-H5TKEGIC.js';
-export { Actions, AgentState, AssistantMessage, Button, FileAttachment, Footer, Header, Input, Messages, MessagesList, MessagesListContainer, MessagesListContent, Response, Suggestions, UserMessage2 as UserMessage, Window } from '../chunk-H5TKEGIC.js';
-import { CopilotSidebar, useChatContext } from '@copilotkit/react-ui';
-import styled, { createGlobalStyle } from 'styled-components';
+import { useButton } from '@react-aria/button';
+import { useRef, useState, useEffect } from 'react';
+import styled4, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { CopilotSidebar, useChatContext } from '@copilotkit/react-ui';
+import { useTextField } from '@react-aria/textfield';
+
+// src/components/copilotkit/Button/Button.tsx
+var variantStyles = {
+  primary: css`
+    background-color: ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+    color: white;
+    border: none;
+
+    &:hover:not(:disabled) {
+      opacity: 0.9;
+      transform: translateY(-1px);
+    }
+
+    &:active:not(:disabled) {
+      opacity: 0.8;
+      transform: translateY(0);
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+      outline-offset: 2px;
+    }
+  `,
+  secondary: css`
+    background-color: transparent;
+    color: ${({ theme }) => theme?.colors?.text ?? "#000000"};
+    border: 1px solid ${({ theme }) => theme?.colors?.border ?? "#E0E0E0"};
+
+    &:hover:not(:disabled) {
+      background-color: ${({ theme }) => theme?.colors?.surface ?? "#ffffff"};
+      border-color: ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+    }
+
+    &:active:not(:disabled) {
+      background-color: ${({ theme }) => theme?.colors?.border ?? "#E0E0E0"};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+      outline-offset: 2px;
+    }
+  `,
+  icon: css`
+    background-color: transparent;
+    color: ${({ theme }) => theme?.colors?.text ?? "#000000"};
+    border: none;
+    padding: ${({ theme }) => theme?.spacing?.sm ?? "8px"};
+    min-width: auto;
+
+    &:hover:not(:disabled) {
+      background-color: ${({ theme }) => theme?.colors?.border ?? "#E0E0E0"};
+      opacity: 0.8;
+    }
+
+    &:active:not(:disabled) {
+      opacity: 0.6;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+      outline-offset: 2px;
+    }
+  `
+};
+var sizeStyles = {
+  small: css`
+    padding: ${({ theme }) => theme?.spacing?.xs ?? "4px"} ${({ theme }) => theme?.spacing?.sm ?? "8px"};
+    font-size: 0.875rem;
+    min-width: 60px;
+    height: 28px;
+  `,
+  medium: css`
+    padding: ${({ theme }) => theme?.spacing?.sm ?? "8px"} ${({ theme }) => theme?.spacing?.md ?? "16px"};
+    font-size: 1rem;
+    min-width: 80px;
+    height: 36px;
+  `,
+  large: css`
+    padding: ${({ theme }) => theme?.spacing?.md ?? "16px"} ${({ theme }) => theme?.spacing?.lg ?? "24px"};
+    font-size: 1.125rem;
+    min-width: 100px;
+    height: 44px;
+  `
+};
+var StyledButton = styled4.button`
+  /* Base styles */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme?.spacing?.xs ?? "4px"};
+  font-family: ${({ theme }) => theme?.fonts?.body ?? "system-ui, sans-serif"};
+  font-weight: 500;
+  border-radius: ${({ theme }) => theme?.radii?.md ?? "8px"};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  user-select: none;
+
+  /* Variant styles */
+  ${({ $variant }) => variantStyles[$variant]}
+
+  /* Size styles */
+  ${({ $size, $variant }) => $variant !== "icon" && sizeStyles[$size]}
+
+  /* Icon variant size overrides */
+  ${({ $variant, $size }) => $variant === "icon" && css`
+      width: ${$size === "small" ? "28px" : $size === "large" ? "44px" : "36px"};
+      height: ${$size === "small" ? "28px" : $size === "large" ? "44px" : "36px"};
+      border-radius: ${({ theme }) => theme?.radii?.sm ?? "4px"};
+    `}
+
+  /* Pressed state */
+  ${({ $isPressed }) => $isPressed && css`
+      transform: scale(0.98);
+    `}
+
+  /* Loading state */
+  ${({ $isLoading }) => $isLoading && css`
+      cursor: wait;
+      opacity: 0.7;
+    `}
+
+  /* Disabled state */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+  }
+
+  /* Remove default focus outline, using focus-visible instead */
+  &:focus {
+    outline: none;
+  }
+`;
+function Button({
+  variant = "primary",
+  size = "medium",
+  children,
+  className,
+  disabled = false,
+  isLoading = false,
+  ...ariaProps
+}) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(
+    {
+      ...ariaProps,
+      isDisabled: disabled || isLoading
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      ...buttonProps,
+      ref,
+      className,
+      $variant: variant,
+      $size: size,
+      $isPressed: isPressed,
+      $isLoading: isLoading,
+      disabled: disabled || isLoading,
+      children: isLoading ? /* @__PURE__ */ jsx("span", { "aria-live": "polite", "aria-busy": "true", children: "Loading..." }) : children
+    }
+  );
+}
+Button.displayName = "Button";
+var ActionsContainer = styled4.div`
+  display: flex;
+  gap: ${({ theme }) => theme?.spacing?.sm ?? "8px"};
+  align-items: center;
+
+  ${({ $layout }) => $layout === "horizontal" ? css`
+          flex-direction: row;
+          flex-wrap: wrap;
+        ` : css`
+          flex-direction: column;
+          align-items: stretch;
+
+          button {
+            width: 100%;
+          }
+        `}
+`;
+function Actions({ actions, layout = "horizontal", className }) {
+  return /* @__PURE__ */ jsx(ActionsContainer, { $layout: layout, className, children: actions.map((action) => /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: action.variant || "secondary",
+      onPress: action.onClick,
+      isDisabled: action.disabled,
+      "aria-label": action.label,
+      children: [
+        action.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: action.icon }),
+        action.variant !== "icon" && action.label
+      ]
+    },
+    action.id
+  )) });
+}
+Actions.displayName = "Actions";
+var dotPulse = keyframes`
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+var blink = keyframes`
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+`;
+var ResponseContainer = styled4.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background-color: #2c2c2e;
+  border-radius: 16px;
+  box-shadow: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  max-width: fit-content;
+  margin: 0 auto;
+`;
+var LoadingDots = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+`;
+var Dot = styled4.span`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #8e8e93;
+  animation: ${dotPulse} 1.4s ease-in-out infinite;
+  animation-delay: ${(props) => props.delay}s;
+`;
+var TypingIndicator = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+
+  ${Dot} {
+    width: 6px;
+    height: 6px;
+    background-color: #8e8e93;
+    animation: ${dotPulse} 1.4s ease-in-out infinite;
+  }
+`;
+var Message = styled4.span`
+  font-size: 14px;
+  color: #e5e5e7;
+  font-weight: 400;
+  line-height: 1.5;
+  white-space: nowrap;
+`;
+var StreamingText = styled4.div`
+  font-size: 14px;
+  line-height: 1.5;
+  color: #e5e5e7;
+  animation: ${fadeIn} 0.3s ease-in;
+  position: relative;
+  font-weight: 400;
+  white-space: nowrap;
+
+  /* Blinking cursor effect */
+  &::after {
+    content: '|';
+    margin-left: 0.125rem;
+    animation: ${blink} 1s infinite;
+    color: #8e8e93;
+    font-weight: 400;
+  }
+`;
+var Response = ({
+  isLoading = false,
+  isTyping = false,
+  isStreaming = false,
+  streamingContent = "",
+  message = "Thinking...",
+  className
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(ResponseContainer, { className, "data-testid": "response-loading", children: [
+      /* @__PURE__ */ jsxs(LoadingDots, { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(Dot, { delay: 0 }),
+        /* @__PURE__ */ jsx(Dot, { delay: 0.15 }),
+        /* @__PURE__ */ jsx(Dot, { delay: 0.3 })
+      ] }),
+      /* @__PURE__ */ jsx(Message, { children: message })
+    ] });
+  }
+  if (isTyping) {
+    return /* @__PURE__ */ jsxs(ResponseContainer, { className, "data-testid": "response-typing", children: [
+      /* @__PURE__ */ jsxs(TypingIndicator, { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(Dot, { delay: 0 }),
+        /* @__PURE__ */ jsx(Dot, { delay: 0.15 }),
+        /* @__PURE__ */ jsx(Dot, { delay: 0.3 })
+      ] }),
+      /* @__PURE__ */ jsx(Message, { children: message })
+    ] });
+  }
+  if (isStreaming && streamingContent) {
+    return /* @__PURE__ */ jsx(ResponseContainer, { className, "data-testid": "response-streaming", children: /* @__PURE__ */ jsx(StreamingText, { children: streamingContent }) });
+  }
+  return null;
+};
+var dotPulse2 = keyframes`
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var shake = keyframes`
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+`;
+var AgentStateContainer = styled4.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background-color: ${(props) => props.isError ? "#3a1f1f" : "#2c2c2e"};
+  border-radius: 16px;
+  border: ${(props) => props.isError ? "1px solid #7f1d1d" : "none"};
+  box-shadow: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  max-width: fit-content;
+  margin: 0 auto;
+`;
+var StateContent = styled4.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+`;
+var IdleIndicator = styled4.div`
+  width: 6px;
+  height: 6px;
+  background-color: #8e8e93;
+  border-radius: 50%;
+  animation: ${dotPulse2} 2s infinite ease-in-out;
+`;
+var ErrorIndicator = styled4.div`
+  width: 6px;
+  height: 6px;
+  background-color: #ff6b6b;
+  border-radius: 50%;
+  animation: ${shake} 0.5s ease-in-out;
+`;
+var StateLabel = styled4.span`
+  font-size: 14px;
+  font-weight: 400;
+  color: #e5e5e7;
+  line-height: 1.5;
+  white-space: nowrap;
+`;
+styled4.p`
+  font-size: 14px;
+  color: #8e8e93;
+  line-height: 1.5;
+  margin: 0;
+  text-align: center;
+  white-space: nowrap;
+`;
+var ProgressBar = styled4.div`
+  width: 100%;
+  height: 4px;
+  background-color: #3a3a3c;
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 4px;
+`;
+var ProgressBarFill = styled4.div`
+  height: 100%;
+  width: ${(props) => Math.min(Math.max(props.progress, 0), 100)}%;
+  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  border-radius: 2px;
+  transition: width 0.3s ease-in-out;
+`;
+var AgentState = ({ state, message, progress, className }) => {
+  if (state === "idle") {
+    return /* @__PURE__ */ jsx(AgentStateContainer, { className, "data-testid": "agent-state-idle", children: /* @__PURE__ */ jsxs(StateContent, { children: [
+      /* @__PURE__ */ jsx(IdleIndicator, {}),
+      /* @__PURE__ */ jsx(StateLabel, { children: message || "Agent is idle" }),
+      progress !== void 0 && /* @__PURE__ */ jsx(ProgressBar, { children: /* @__PURE__ */ jsx(ProgressBarFill, { progress }) })
+    ] }) });
+  }
+  if (state === "error") {
+    return /* @__PURE__ */ jsx(AgentStateContainer, { className, "data-testid": "agent-state-error", isError: true, children: /* @__PURE__ */ jsxs(StateContent, { children: [
+      /* @__PURE__ */ jsx(ErrorIndicator, {}),
+      /* @__PURE__ */ jsx(StateLabel, { children: message || "Error occurred" })
+    ] }) });
+  }
+  if (state === "thinking") {
+    return /* @__PURE__ */ jsx(
+      Response,
+      {
+        isLoading: true,
+        message: message || "Agent is thinking...",
+        className
+      }
+    );
+  }
+  if (state === "responding") {
+    return /* @__PURE__ */ jsx(
+      Response,
+      {
+        isTyping: true,
+        message: message || "Agent is responding...",
+        className
+      }
+    );
+  }
+  return null;
+};
+var MessageContainer = styled4.div`
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 8px 0;
+  max-width: 100%;
+`;
+var AvatarContainer = styled4.div`
+  flex-shrink: 0;
+`;
+var Avatar = styled4.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  background-color: #e5e7eb;
+`;
+var AvatarInitials = styled4.div`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+var ContentContainer = styled4.div`
+  flex: 1;
+  min-width: 0;
+`;
+var MessageContent = styled4.div`
+  background-color: #2c2c2e;
+  padding: 12px 16px;
+  border-radius: 16px;
+  border-top-left-radius: 4px;
+  color: #e5e5e7;
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+`;
+var LoadingDots2 = styled4.div`
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px;
+  background-color: #2c2c2e;
+  border-radius: 16px;
+  border-top-left-radius: 4px;
+  width: fit-content;
+`;
+var bounce = keyframes`
+  0%, 60%, 100% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-8px);
+  }
+`;
+var LoadingDot = styled4.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #8e8e93;
+  animation: ${bounce} 1.4s ease-in-out infinite;
+  animation-delay: ${(props) => props.delay}s;
+`;
+var FileAttachmentContainer = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background-color: #3a3a3c;
+  border: 1px solid #48484a;
+  border-radius: 8px;
+  max-width: 320px;
+  cursor: ${(props) => props.$isInteractive ? "pointer" : "default"};
+  transition: border-color 0.15s ease;
+
+  /* Remove default button styles when used as button */
+  ${(props) => props.$isInteractive && `
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    appearance: none;
+    -webkit-appearance: none;
 
+    &:hover {
+      border-color: #5a5a5c;
+      background-color: #48484a;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #5B9FFF;
+      outline-offset: 2px;
+      border-color: #5B9FFF;
+    }
+
+    &:active {
+      border-color: #6a6a6c;
+    }
+  `}
+`;
+var FileIconContainer = styled4.div`
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  line-height: 1;
+`;
+var FileInfo = styled4.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+var FileTitle = styled4.div`
+  font-size: 14px;
+  font-weight: 500;
+  color: #e5e5e7;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var FileMetadata = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #8e8e93;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  overflow: hidden;
+`;
+var FileSubtitle = styled4.span`
+  color: #8e8e93;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:last-child {
+    flex-shrink: 0;
+  }
+`;
+var FileAttachment = ({
+  title,
+  subtitle,
+  size,
+  icon = "\u{1F4C4}",
+  onClick,
+  onPress,
+  className,
+  ...ariaProps
+}) => {
+  const ref = useRef(null);
+  const isInteractive = !!(onClick || onPress);
+  const handlePress = (e) => {
+    if (onClick) onClick();
+    if (onPress) onPress(e);
+  };
+  const { buttonProps } = useButton(
+    {
+      ...ariaProps,
+      onPress: isInteractive ? handlePress : void 0,
+      isDisabled: !isInteractive
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsxs(
+    FileAttachmentContainer,
+    {
+      ...isInteractive ? buttonProps : {},
+      ref: isInteractive ? ref : void 0,
+      className,
+      $isInteractive: isInteractive,
+      as: isInteractive ? "button" : "div",
+      children: [
+        /* @__PURE__ */ jsx(FileIconContainer, { children: icon }),
+        /* @__PURE__ */ jsxs(FileInfo, { children: [
+          /* @__PURE__ */ jsx(FileTitle, { children: title }),
+          /* @__PURE__ */ jsxs(FileMetadata, { children: [
+            subtitle && /* @__PURE__ */ jsx(FileSubtitle, { children: subtitle }),
+            size && subtitle && /* @__PURE__ */ jsx(FileSubtitle, { "aria-hidden": "true", children: " \u2022 " }),
+            size && /* @__PURE__ */ jsx(FileSubtitle, { children: size })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var AttachmentsContainer = styled4.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+`;
+var AssistantMessage = ({
+  content = "",
+  avatarUrl,
+  avatarInitials: _avatarInitials = "AI",
+  isLoading = false,
+  className,
+  attachments = [],
+  enableMarkdown: _enableMarkdown = false
+}) => {
+  const renderContent = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ jsxs(LoadingDots2, { children: [
+        /* @__PURE__ */ jsx(LoadingDot, { delay: 0 }),
+        /* @__PURE__ */ jsx(LoadingDot, { delay: 0.2 }),
+        /* @__PURE__ */ jsx(LoadingDot, { delay: 0.4 })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      content && /* @__PURE__ */ jsx(MessageContent, { children: content }),
+      attachments.length > 0 && /* @__PURE__ */ jsx(AttachmentsContainer, { children: attachments.map((attachment, index) => /* @__PURE__ */ jsx(FileAttachment, { ...attachment }, `${attachment.title}-${index}`)) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(MessageContainer, { className, children: [
+    /* @__PURE__ */ jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsx(AvatarInitials, { children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17 13a4 4 0 0 1 0 8c-2.142 0-4-1.79-4-4h-2a4 4 0 1 1-.535-2h3.07A4 4 0 0 1 17 13M2 12v-2h2V7a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v3h2v2z" }) }) }) }),
+    /* @__PURE__ */ jsx(ContentContainer, { children: renderContent() })
+  ] });
+};
+var dotPulse3 = keyframes`
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var Container = styled4.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background-color: #2c2c2e;
+  border-radius: 16px;
+  box-shadow: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  max-width: fit-content;
+  margin: 0 auto;
+`;
+var Avatar2 = styled4.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+`;
+var HeadphonesIcon = styled4.svg`
+  width: 20px;
+  height: 20px;
+  color: #FFFFFF;
+`;
+var Content = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+var LoadingDots3 = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+`;
+var Dot2 = styled4.span`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #8e8e93;
+  animation: ${dotPulse3} 1.4s ease-in-out infinite;
+`;
+var Message2 = styled4.span`
+  font-size: 14px;
+  color: #e5e5e7;
+  font-weight: 400;
+  line-height: 1.5;
+  white-space: nowrap;
+`;
+function AssistantThinking({
+  message = "Analyzing data, please wait...",
+  className,
+  ariaLabel = "Assistant is thinking"
+}) {
+  const containerRef = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      ref: containerRef,
+      className,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx(Avatar2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(HeadphonesIcon, { viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M17 13a4 4 0 0 1 0 8c-2.142 0-4-1.79-4-4h-2a4 4 0 1 1-.535-2h3.07A4 4 0 0 1 17 13M2 12v-2h2V7a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v3h2v2z" }) }) }),
+        /* @__PURE__ */ jsxs(Content, { children: [
+          /* @__PURE__ */ jsxs(LoadingDots3, { "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(Dot2, { style: { animationDelay: "0ms" } }),
+            /* @__PURE__ */ jsx(Dot2, { style: { animationDelay: "150ms" } }),
+            /* @__PURE__ */ jsx(Dot2, { style: { animationDelay: "300ms" } })
+          ] }),
+          /* @__PURE__ */ jsx(Message2, { children: message })
+        ] })
+      ]
+    }
+  );
+}
+AssistantThinking.displayName = "AssistantThinking";
 var AssistantMessageAdapter = ({
   message,
   isLoading,
@@ -38,7 +820,164 @@ var AssistantMessageAdapter = ({
   );
 };
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
-var UserMessageWrapper = styled.div`
+var StyledUserMessage = styled4.button`
+  /* Base styles */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: #ffffff;
+  border: none;
+  cursor: default;
+  user-select: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  position: relative;
+  text-align: left;
+
+  /* Pill shape - fully rounded ends */
+  border-radius: 999px;
+
+  /* Purple to blue gradient (left to right) */
+  background: linear-gradient(90deg, #8B5CF6 0%, #5B8DEF 100%);
+
+  /* Subtle shadow and glow effect */
+  box-shadow:
+    0 2px 8px rgba(91, 141, 239, 0.25),
+    0 1px 3px rgba(139, 92, 246, 0.15);
+
+  /* Smooth transitions */
+  transition: all 0.2s ease-in-out;
+
+  /* Speech bubble tail */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    background: #5B8DEF;
+    transform: rotate(45deg);
+    border-radius: 0 0 16px 0;
+    box-shadow:
+      2px 2px 4px rgba(91, 141, 239, 0.15);
+    transition: all 0.2s ease-in-out;
+  }
+
+  /* Hover state - only for button elements */
+  &[role="button"]:hover:not(:disabled) {
+    transform: translateY(-1px);
+    cursor: pointer;
+    box-shadow:
+      0 4px 12px rgba(91, 141, 239, 0.35),
+      0 2px 6px rgba(139, 92, 246, 0.25);
+
+    &::after {
+      box-shadow:
+        3px 3px 6px rgba(91, 141, 239, 0.2);
+    }
+  }
+
+  /* Active/Pressed state - only for button elements */
+  &[role="button"]:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow:
+      0 1px 4px rgba(91, 141, 239, 0.2),
+      0 1px 2px rgba(139, 92, 246, 0.1);
+
+    &::after {
+      box-shadow:
+        1px 1px 2px rgba(91, 141, 239, 0.1);
+    }
+  }
+
+  ${({ $isPressed }) => $isPressed && css`
+      transform: translateY(0) scale(0.98);
+      box-shadow:
+        0 1px 4px rgba(91, 141, 239, 0.2),
+        0 1px 2px rgba(139, 92, 246, 0.1);
+
+      &::after {
+        box-shadow:
+          1px 1px 2px rgba(91, 141, 239, 0.1);
+      }
+    `}
+
+  /* Focus state for accessibility */
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #5B8DEF;
+    outline-offset: 3px;
+    box-shadow:
+      0 4px 12px rgba(91, 141, 239, 0.35),
+      0 2px 6px rgba(139, 92, 246, 0.25),
+      0 0 0 3px rgba(91, 141, 239, 0.1);
+  }
+
+  /* Disabled state */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+    box-shadow: none;
+
+    &::after {
+      opacity: 0.5;
+      box-shadow: none;
+    }
+  }
+`;
+function UserMessage({
+  children,
+  className,
+  isPressed = false,
+  onPress,
+  ...ariaProps
+}) {
+  const ref = useRef(null);
+  if (!onPress) {
+    return /* @__PURE__ */ jsx(
+      StyledUserMessage,
+      {
+        as: "div",
+        className,
+        $isPressed: isPressed,
+        role: "presentation",
+        children
+      }
+    );
+  }
+  const { buttonProps, isPressed: ariaPressedState } = useButton(
+    {
+      ...ariaProps,
+      onPress
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx(
+    StyledUserMessage,
+    {
+      ...buttonProps,
+      ref,
+      className,
+      $isPressed: isPressed || ariaPressedState,
+      role: "button",
+      tabIndex: 0,
+      children
+    }
+  );
+}
+UserMessage.displayName = "UserMessage";
+var UserMessageWrapper = styled4.div`
   display: flex;
   justify-content: flex-end;
   width: 100%;
@@ -52,15 +991,292 @@ var UserMessageAdapter = ({
     return /* @__PURE__ */ jsx(
       ImageRenderer,
       {
-        image: message.image,
-        content: message.content
-      }
-    );
-  }
-  const content = message?.content || "";
-  return /* @__PURE__ */ jsx(UserMessageWrapper, { children: /* @__PURE__ */ jsx(UserMessage, { children: content }) });
+        image: message.image,
+        content: message.content
+      }
+    );
+  }
+  const content = message?.content || "";
+  return /* @__PURE__ */ jsx(UserMessageWrapper, { children: /* @__PURE__ */ jsx(UserMessage, { children: content }) });
+};
+UserMessageAdapter.displayName = "UserMessageAdapter";
+var ChatInputContainer = styled4.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 8px;
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  box-sizing: border-box;
+
+  @media (min-width: 640px) {
+    padding: 12px;
+  }
+`;
+var SuggestionsWrapper = styled4.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+  width: 100%;
+  box-sizing: border-box;
+`;
+var SuggestionButton = styled4.button`
+  padding: 8px 16px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  text-align: center;
+  border: 1px solid #3a3a3c;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+
+  /* Dark theme colors */
+  background-color: #2c2c2e;
+  color: #e5e5e7;
+
+  /* Hover state */
+  &:hover:not(:disabled) {
+    background-color: #3a3a3c;
+    border-color: #48484a;
+  }
+
+  /* Active state */
+  &:active:not(:disabled) {
+    background-color: #48484a;
+  }
+
+  /* Focus state */
+  &:focus-visible {
+    outline: 2px solid #5B9FFF;
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+`;
+var InputWrapper = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background-color: #2c2c2e;
+  border: 1px solid #3a3a3c;
+  border-radius: 12px;
+  transition: all 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:focus-within {
+    border-color: #5B9FFF;
+    background-color: #323234;
+  }
+`;
+var InputField = styled4.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  color: #e5e5e7;
+  background: transparent;
+
+  &::placeholder {
+    color: #6e6e73;
+  }
+
+  &:disabled {
+    color: #6e6e73;
+    cursor: not-allowed;
+  }
+`;
+var SubmitButton = styled4.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: ${(props) => props.disabled ? "#3a3a3c" : "#5B9FFF"};
+  color: ${(props) => props.disabled ? "#6e6e73" : "#ffffff"};
+  cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    background-color: #4A8FEF;
+    transform: scale(1.05);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #5B9FFF;
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+var ChatInput = ({
+  suggestions = [],
+  onSuggestionSelect,
+  value = "",
+  onChange,
+  onSubmit,
+  placeholder = "Ask, write or search for anything...",
+  isDisabled = false,
+  isReadOnly = false,
+  autoFocus = false,
+  className,
+  "aria-label": ariaLabel = "Chat message input",
+  ...ariaProps
+}) => {
+  const [internalValue, setInternalValue] = useState(value);
+  const inputRef = useRef(null);
+  const currentValue = value !== void 0 ? value : internalValue;
+  const setValue = onChange || setInternalValue;
+  const { inputProps } = useTextField(
+    {
+      ...ariaProps,
+      "aria-label": ariaLabel,
+      value: currentValue,
+      onChange: (newValue) => {
+        setValue(newValue);
+      },
+      isDisabled,
+      isReadOnly
+    },
+    inputRef
+  );
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleSubmit = () => {
+    if (currentValue.trim() && onSubmit && !isDisabled && !isReadOnly) {
+      onSubmit(currentValue.trim());
+      setValue("");
+      inputRef.current?.focus();
+    }
+  };
+  const handleSuggestionClick = (suggestionText) => {
+    if (onSuggestionSelect && !isDisabled && !isReadOnly) {
+      onSuggestionSelect(suggestionText);
+      setValue(suggestionText);
+      inputRef.current?.focus();
+    }
+  };
+  const canSubmit = currentValue.trim().length > 0 && !isDisabled && !isReadOnly;
+  return /* @__PURE__ */ jsxs(ChatInputContainer, { className, children: [
+    suggestions.length > 0 && /* @__PURE__ */ jsx(SuggestionsWrapper, { role: "list", "aria-label": "Suggested prompts", children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+      SuggestionButtonComponent,
+      {
+        suggestion,
+        onSelect: handleSuggestionClick,
+        isDisabled: isDisabled || isReadOnly
+      },
+      `${suggestion.text}-${index}`
+    )) }),
+    /* @__PURE__ */ jsxs(InputWrapper, { children: [
+      /* @__PURE__ */ jsx(
+        InputField,
+        {
+          ...inputProps,
+          ref: inputRef,
+          type: "text",
+          placeholder,
+          onKeyDown: handleKeyDown,
+          autoFocus,
+          disabled: isDisabled,
+          readOnly: isReadOnly
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubmitButtonComponent,
+        {
+          onPress: handleSubmit,
+          isDisabled: !canSubmit,
+          ariaLabel: "Send message"
+        }
+      )
+    ] })
+  ] });
 };
-UserMessageAdapter.displayName = "UserMessageAdapter";
+var SuggestionButtonComponent = ({
+  suggestion,
+  onSelect,
+  isDisabled = false
+}) => {
+  const ref = useRef(null);
+  const { buttonProps } = useButton(
+    {
+      onPress: () => onSelect(suggestion.text),
+      isDisabled,
+      "aria-label": `Select suggestion: ${suggestion.text}`
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx(SuggestionButton, { ...buttonProps, ref, role: "listitem", children: suggestion.text });
+};
+var SubmitButtonComponent = ({
+  onPress,
+  isDisabled = false,
+  ariaLabel = "Send message"
+}) => {
+  const ref = useRef(null);
+  const { buttonProps } = useButton(
+    {
+      onPress,
+      isDisabled,
+      "aria-label": ariaLabel
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx(SubmitButton, { ...buttonProps, ref, disabled: isDisabled, title: ariaLabel, children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Arrow Right Icon" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 10H16M16 10L10 4M16 10L10 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  ) });
+};
+ChatInput.displayName = "ChatInput";
 var InputAdapter = ({
   inProgress,
   onSend,
@@ -95,6 +1311,277 @@ var InputAdapter = ({
   );
 };
 InputAdapter.displayName = "InputAdapter";
+var HeaderContainer = styled4.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  background-color: #2c2c2e;
+  border-bottom: 1px solid #3a3a3c;
+  min-height: 60px;
+  box-sizing: border-box;
+
+  @media (min-width: 640px) {
+    padding: 12px;
+  }
+`;
+var HeaderContent = styled4.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme?.spacing?.xs ?? "4px"};
+  flex: 1;
+  min-width: 0;
+`;
+var HeaderTitle = styled4.h1`
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #e5e5e7;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var HeaderSubtitle = styled4.p`
+  margin: 0;
+  font-size: 0.875rem;
+  color: #8e8e93;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var HeaderActions = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme?.spacing?.xs ?? "4px"};
+  margin-left: ${({ theme }) => theme?.spacing?.md ?? "16px"};
+`;
+var ActionButton = styled4.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 6px;
+  color: #e5e5e7;
+  cursor: pointer;
+  transition: all 150ms ease;
+
+  &:hover:not(:disabled) {
+    background-color: #3a3a3c;
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.95);
+    background-color: #48484a;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #5B9FFF;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+  }
+`;
+var Header = ({
+  title,
+  subtitle,
+  onClose,
+  onMinimize,
+  className
+}) => {
+  const minimizeRef = useRef(null);
+  const closeRef = useRef(null);
+  const { buttonProps: minimizeProps } = useButton(
+    {
+      onPress: onMinimize,
+      "aria-label": "Minimize",
+      isDisabled: !onMinimize
+    },
+    minimizeRef
+  );
+  const { buttonProps: closeProps } = useButton(
+    {
+      onPress: onClose,
+      "aria-label": "Close",
+      isDisabled: !onClose
+    },
+    closeRef
+  );
+  return /* @__PURE__ */ jsxs(HeaderContainer, { className, children: [
+    /* @__PURE__ */ jsxs(HeaderContent, { children: [
+      /* @__PURE__ */ jsx(HeaderTitle, { children: title }),
+      subtitle && /* @__PURE__ */ jsx(HeaderSubtitle, { children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs(HeaderActions, { children: [
+      onMinimize && /* @__PURE__ */ jsx(ActionButton, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("title", { children: "Minimize" }),
+            /* @__PURE__ */ jsx("line", { x1: "3", y1: "8", x2: "13", y2: "8", stroke: "currentColor", strokeWidth: "2" })
+          ]
+        }
+      ) }),
+      onClose && /* @__PURE__ */ jsx(ActionButton, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("title", { children: "Close" }),
+            /* @__PURE__ */ jsx("line", { x1: "4", y1: "4", x2: "12", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "4", x2: "4", y2: "12", stroke: "currentColor", strokeWidth: "2" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
+Header.displayName = "Header";
+var MessagesContainer = styled4.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  background-color: #1c1c1e;
+  padding: 8px;
+  gap: 12px;
+  box-sizing: border-box;
+
+  /* Ensure proper scrolling behavior for child components */
+  position: relative;
+  min-height: 0;
+
+  /* Desktop padding */
+  @media (min-width: 640px) {
+    padding: 12px;
+  }
+`;
+var Messages = ({
+  children,
+  className,
+  ariaLabel = "Messages"
+}) => {
+  return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
+};
+Messages.displayName = "Messages";
+var WindowContainer = styled4.div`
+  display: flex;
+  flex-direction: column;
+  background-color: #1c1c1e;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: hidden;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+
+  /* Default dimensions */
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+
+  /* Fullscreen state */
+  ${({ $isFullscreen }) => $isFullscreen && css`
+      width: 100vw;
+      height: 100vh;
+      border-radius: 0;
+      box-shadow: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+    `}
+
+  /* Minimized state */
+  ${({ $isMinimized }) => $isMinimized && css`
+      height: 60px;
+      width: 300px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+
+      /* Hide all content except header when minimized */
+      > *:not(:first-child) {
+        display: none;
+      }
+
+      /* Keep header visible but adjust styling */
+      > *:first-child {
+        border-bottom: none;
+      }
+    `}
+
+  /* Responsive behavior for smaller screens */
+  @media (max-width: 768px) {
+    ${({ $isFullscreen, $isMinimized }) => !$isFullscreen && !$isMinimized && css`
+        width: 100vw;
+        height: 100vh;
+        border-radius: 0;
+        max-width: 100%;
+        max-height: 100%;
+      `}
+  }
+
+  /* Focus states for accessibility */
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+    outline-offset: 2px;
+  }
+
+  /* Ensure proper stacking context */
+  z-index: ${({ $isFullscreen }) => $isFullscreen ? 1e3 : 100};
+`;
+var Window = ({
+  isMinimized = false,
+  isFullscreen = false,
+  width = "400px",
+  height = "600px",
+  children,
+  className,
+  ariaLabel = "Chat window"
+}) => {
+  return /* @__PURE__ */ jsx(
+    WindowContainer,
+    {
+      className,
+      $isMinimized: isMinimized,
+      $isFullscreen: isFullscreen,
+      $width: width,
+      $height: height,
+      role: "dialog",
+      "aria-label": ariaLabel,
+      "aria-modal": "false",
+      children
+    }
+  );
+};
+Window.displayName = "Window";
 var GlobalSidebarStyles = createGlobalStyle`
   /* Override CopilotKit's default positioning - start off-screen */
   .copilotKitSidebar {
@@ -176,7 +1663,7 @@ var GlobalSidebarStyles = createGlobalStyle`
     }
   }
 `;
-var StyledChatButton = styled.button`
+var StyledChatButton = styled4.button`
   position: fixed;
   bottom: 8px;
   right: 8px;
@@ -298,6 +1785,601 @@ function CustomCopilotSidebar({
   ] });
 }
 CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
+var FooterContainer = styled4.footer`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => theme?.spacing?.sm ?? "8px"} ${({ theme }) => theme?.spacing?.md ?? "16px"};
+  background-color: ${({ theme }) => theme?.colors?.surface ?? "#ffffff"};
+  border-top: 1px solid ${({ theme }) => theme?.colors?.border ?? "#E0E0E0"};
+  min-height: 44px;
+`;
+var FooterContent = styled4.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme?.spacing?.md ?? "16px"};
+  width: 100%;
+  max-width: 100%;
+  font-size: 0.75rem;
+  color: ${({ theme }) => theme?.colors?.text ?? "#000000"};
+  opacity: 0.6;
+  font-family: ${({ theme }) => theme?.fonts?.body ?? "system-ui, sans-serif"};
+  line-height: 1.4;
+`;
+var FooterBranding = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme?.spacing?.xs ?? "4px"};
+  flex-shrink: 0;
+`;
+var FooterStatus = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme?.spacing?.xs ?? "4px"};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  opacity: 0.8;
+`;
+var FooterLink = styled4.a`
+  color: ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+  text-decoration: none;
+  transition: opacity 150ms ease;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+    outline-offset: 2px;
+    border-radius: ${({ theme }) => theme?.radii?.sm ?? "4px"};
+  }
+`;
+var Footer = ({
+  branding,
+  status,
+  brandingUrl,
+  onBrandingClick,
+  className
+}) => {
+  if (!branding && !status) {
+    return null;
+  }
+  const handleBrandingClick = (e) => {
+    if (onBrandingClick) {
+      e.preventDefault();
+      onBrandingClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(FooterContainer, { className, children: /* @__PURE__ */ jsxs(FooterContent, { children: [
+    branding && /* @__PURE__ */ jsx(FooterBranding, { children: brandingUrl ? /* @__PURE__ */ jsx(
+      FooterLink,
+      {
+        href: brandingUrl,
+        onClick: handleBrandingClick,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: branding
+      }
+    ) : branding }),
+    status && /* @__PURE__ */ jsx(FooterStatus, { children: status })
+  ] }) });
+};
+Footer.displayName = "Footer";
+var InputContainer = styled4.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	position: relative;
+`;
+var InputWrapper2 = styled4.div`
+	display: flex;
+	align-items: flex-end;
+	gap: 8px;
+	padding: 12px;
+	background-color: #ffffff;
+	border: 1px solid #e5e7eb;
+	border-radius: 12px;
+	transition: all 0.2s ease;
+
+	&:focus-within {
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+	}
+
+	&:hover:not(:focus-within) {
+		border-color: #d1d5db;
+	}
+`;
+var TextArea = styled4.textarea`
+	flex: 1;
+	min-height: 24px;
+	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
+	padding: 0;
+	border: none;
+	outline: none;
+	resize: none;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+		'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+	font-size: 14px;
+	line-height: 24px;
+	color: #111827;
+	background: transparent;
+	overflow-y: auto;
+
+	&::placeholder {
+		color: #9ca3af;
+	}
+
+	&:disabled {
+		color: #9ca3af;
+		cursor: not-allowed;
+	}
+
+	&:read-only {
+		cursor: default;
+	}
+
+	/* Custom scrollbar */
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #d1d5db;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: #9ca3af;
+	}
+`;
+var SendButton = styled4.button`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	padding: 0;
+	border: none;
+	border-radius: 8px;
+	background-color: ${(props) => props.disabled ? "#e5e7eb" : "#3b82f6"};
+	color: ${(props) => props.disabled ? "#9ca3af" : "#ffffff"};
+	cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
+	transition: all 0.2s ease;
+	flex-shrink: 0;
+
+	&:hover:not(:disabled) {
+		background-color: #2563eb;
+		transform: translateY(-1px);
+	}
+
+	&:active:not(:disabled) {
+		transform: translateY(0);
+	}
+
+	&:focus-visible {
+		outline: 2px solid #3b82f6;
+		outline-offset: 2px;
+	}
+
+	svg {
+		width: 20px;
+		height: 20px;
+	}
+`;
+var Input = ({
+  value = "",
+  onChange,
+  onSubmit,
+  placeholder = "Type a message...",
+  isDisabled = false,
+  isReadOnly = false,
+  maxRows = 5,
+  autoFocus = false,
+  className,
+  "aria-label": ariaLabel = "Message input",
+  ...ariaProps
+}) => {
+  const textareaRef = useRef(null);
+  const { inputProps } = useTextField(
+    {
+      ...ariaProps,
+      "aria-label": ariaLabel,
+      value,
+      onChange: (newValue) => {
+        onChange?.(newValue);
+      },
+      isDisabled,
+      isReadOnly,
+      inputElementType: "textarea"
+    },
+    textareaRef
+  );
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (value.trim() && onSubmit && !isDisabled && !isReadOnly) {
+        onSubmit(value.trim());
+        onChange?.("");
+      }
+    }
+  };
+  const handleSend = () => {
+    if (value.trim() && onSubmit && !isDisabled && !isReadOnly) {
+      onSubmit(value.trim());
+      onChange?.("");
+      textareaRef.current?.focus();
+    }
+  };
+  const canSend = value.trim().length > 0 && !isDisabled && !isReadOnly;
+  return /* @__PURE__ */ jsx(InputContainer, { className, children: /* @__PURE__ */ jsxs(InputWrapper2, { children: [
+    /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        ...inputProps,
+        ref: textareaRef,
+        placeholder,
+        onKeyDown: handleKeyDown,
+        $maxRows: maxRows,
+        autoFocus,
+        disabled: isDisabled,
+        readOnly: isReadOnly
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SendButton,
+      {
+        type: "button",
+        onClick: handleSend,
+        disabled: !canSend,
+        "aria-label": "Send message",
+        title: "Send message (Enter)",
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            role: "img",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("title", { children: "Send Icon" }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M2.5 10L17.5 3.75L11.25 18.75L10 12.5L2.5 10Z",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+};
+var MessagesListContainer = styled4.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: ${(props) => props.$maxHeight};
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  scroll-behavior: smooth;
+
+  /* Custom scrollbar styling */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+    transition: background 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+
+  /* Firefox scrollbar styling */
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 #f1f5f9;
+
+  /* Ensure proper rendering on mobile */
+  -webkit-overflow-scrolling: touch;
+`;
+var MessagesListContent = styled4.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  min-height: min-content;
+
+  /* Message styling */
+  .message {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    max-width: 85%;
+    word-wrap: break-word;
+    animation: messageSlideIn 0.2s ease-out;
+  }
+
+  @keyframes messageSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Role-specific message styling */
+  .message--user {
+    align-self: flex-end;
+    background: #3b82f6;
+    color: #ffffff;
+    border-bottom-right-radius: 4px;
+  }
+
+  .message--assistant {
+    align-self: flex-start;
+    background: #f1f5f9;
+    color: #1e293b;
+    border-bottom-left-radius: 4px;
+  }
+
+  .message--system {
+    align-self: center;
+    background: #fef3c7;
+    color: #92400e;
+    font-size: 0.875rem;
+    font-style: italic;
+    max-width: 100%;
+    text-align: center;
+  }
+`;
+var MessagesList = ({
+  messages,
+  autoScroll = true,
+  className,
+  renderMessage,
+  onScrollTop,
+  maxHeight = "600px"
+}) => {
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const isUserScrollingRef = useRef(false);
+  const scrollTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (autoScroll && !isUserScrollingRef.current && containerRef.current) {
+      const container = containerRef.current;
+      container.scrollTop = container.scrollHeight;
+    }
+  }, [messages.length, autoScroll]);
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 10;
+    isUserScrollingRef.current = !isAtBottom;
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+    scrollTimeoutRef.current = setTimeout(() => {
+      isUserScrollingRef.current = false;
+    }, 1e3);
+    if (container.scrollTop === 0 && onScrollTop) {
+      onScrollTop();
+    }
+  };
+  useEffect(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+  const defaultRenderMessage = (message) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `message message--${message.role}`,
+      "data-message-id": message.id,
+      "data-role": message.role,
+      children: message.content
+    },
+    message.id
+  );
+  return /* @__PURE__ */ jsx(
+    MessagesListContainer,
+    {
+      ref: containerRef,
+      onScroll: handleScroll,
+      className,
+      $maxHeight: maxHeight,
+      children: /* @__PURE__ */ jsx(MessagesListContent, { ref: contentRef, children: messages.map(renderMessage || defaultRenderMessage) })
+    }
+  );
+};
+var StyledUserMessage2 = styled4.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  margin: 8px 0;
+  padding: 0 16px;
+  width: 100%;
+`;
+var MessageBubble = styled4.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+  padding: 12px 16px;
+  border-radius: 18px 18px 4px 18px;
+
+  /* User message colors - distinct from assistant messages */
+  background-color: #007AFF;
+  color: #FFFFFF;
+
+  /* Box shadow for depth */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  /* Smooth transitions */
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  /* Username styling */
+  strong {
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 4px;
+    opacity: 0.9;
+  }
+`;
+var MessageContent2 = styled4.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+`;
+var MessageTime = styled4.time`
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+  text-align: right;
+`;
+var UserMessage2 = ({
+  content,
+  timestamp,
+  className,
+  avatarUrl,
+  username
+}) => {
+  return /* @__PURE__ */ jsxs(StyledUserMessage2, { className, children: [
+    /* @__PURE__ */ jsxs(MessageBubble, { children: [
+      username && /* @__PURE__ */ jsx("strong", { children: username }),
+      /* @__PURE__ */ jsx(MessageContent2, { children: content }),
+      timestamp && /* @__PURE__ */ jsx(MessageTime, { children: timestamp })
+    ] }),
+    avatarUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: avatarUrl,
+        alt: username || "User",
+        style: { width: "32px", height: "32px", borderRadius: "50%", marginLeft: "8px" }
+      }
+    )
+  ] });
+};
+var SuggestionsContainer = styled4.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme?.spacing?.sm ?? "8px"};
+  padding: ${({ theme }) => theme?.spacing?.md ?? "16px"} 0;
+`;
+var StyledSuggestion = styled4.button`
+  /* Base styles */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => theme?.spacing?.sm ?? "8px"} ${({ theme }) => theme?.spacing?.md ?? "16px"};
+  font-family: ${({ theme }) => theme?.fonts?.body ?? "system-ui, sans-serif"};
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: ${({ theme }) => theme?.colors?.text ?? "#000000"};
+  background-color: ${({ theme }) => theme?.colors?.surface ?? "#ffffff"};
+  border: 1px solid ${({ theme }) => theme?.colors?.border ?? "#E0E0E0"};
+  border-radius: ${({ theme }) => theme?.radii?.lg ?? "12px"};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  user-select: none;
+
+  /* Hover state */
+  &:hover:not(:disabled) {
+    background-color: ${({ theme }) => theme?.colors?.border ?? "#E0E0E0"};
+    border-color: ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Active/Pressed state */
+  &:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  ${({ $isPressed }) => $isPressed && css`
+      transform: scale(0.98);
+    `}
+
+  /* Focus state */
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme?.colors?.primary ?? "#0066FF"};
+    outline-offset: 2px;
+  }
+
+  /* Remove default focus outline */
+  &:focus {
+    outline: none;
+  }
+
+  /* Disabled state */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+  }
+`;
+function Suggestions({ suggestions, onSelect, className }) {
+  if (suggestions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(SuggestionsContainer, { className, role: "list", "aria-label": "Suggested prompts", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(SuggestionChip, { suggestion, onSelect }, suggestion)) });
+}
+function SuggestionChip({ suggestion, onSelect }) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(
+    {
+      onPress: () => onSelect(suggestion),
+      "aria-label": `Select suggestion: ${suggestion}`
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
+}
+Suggestions.displayName = "Suggestions";
 var GlobalSidebarStyles2 = createGlobalStyle`
   /* Override CopilotKit's default positioning - start off-screen */
   .copilotKitSidebar {
@@ -406,7 +2488,7 @@ var GlobalSidebarStyles2 = createGlobalStyle`
     }
   }
 `;
-var StyledChatButton2 = styled.button`
+var StyledChatButton2 = styled4.button`
   position: fixed;
   bottom: 8px;
   right: 8px;
@@ -537,6 +2619,6 @@ var CustomCopilotSidebar2 = ({
 };
 CustomCopilotSidebar2.displayName = "CustomCopilotSidebar";
 
-export { AssistantMessageAdapter, CustomCopilotSidebar, InputAdapter, CustomCopilotSidebar2 as IntegratedSidebar, UserMessageAdapter };
+export { Actions, AgentState, AssistantMessage, AssistantMessageAdapter, Button, CustomCopilotSidebar, FileAttachment, Footer, Header, Input, InputAdapter, CustomCopilotSidebar2 as IntegratedSidebar, Messages, MessagesList, MessagesListContainer, MessagesListContent, Response, Suggestions, UserMessage2 as UserMessage, UserMessageAdapter, Window };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map