@aizu-chat/react 0.0.10 → 0.1.1

package/dist/index.js

@@ -71,9 +71,13 @@ var __async = (__this, __arguments, generator) => {
 var src_exports = {};
 __export(src_exports, {
   AizuChat: () => AizuChat,
+  AizuClient: () => AizuClient,
   Button: () => Button,
   Loading: () => Loading,
   QuickMenus: () => QuickMenus,
+  TestComponent: () => TestComponent,
+  TypeResponse: () => TypeResponse,
+  createAizuClient: () => createAizuClient,
   useCustom: () => useCustom
 });
 module.exports = __toCommonJS(src_exports);
@@ -101,7 +105,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/global.css
-styleInject('/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-orange-200: oklch(90.1% 0.076 70.697);\n    --color-orange-300: oklch(83.7% 0.128 66.29);\n    --color-orange-400: oklch(75% 0.183 55.934);\n    --color-orange-500: oklch(70.5% 0.213 47.604);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-sm: 0.25rem;\n    --radius-2xl: 1rem;\n    --radius-3xl: 1.5rem;\n    --radius-4xl: 2rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --font-sukhumvit:\n      "Sukhumvit Set",\n      ui-sans-serif,\n      system-ui,\n      sans-serif;\n    --animate-circle-keys: circle-keys 2s ease-in-out infinite;\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-5 {\n    right: calc(var(--spacing) * 5);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-5 {\n    bottom: calc(var(--spacing) * 5);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-3000 {\n    z-index: 3000;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .-mx-4 {\n    margin-inline: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-auto {\n    margin-top: auto;\n  }\n  .mr-3 {\n    margin-right: calc(var(--spacing) * 3);\n  }\n  .mr-auto {\n    margin-right: auto;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-29\\.5 {\n    height: calc(var(--spacing) * 29.5);\n  }\n  .h-42\\.5 {\n    height: calc(var(--spacing) * 42.5);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-75\\.5 {\n    width: calc(var(--spacing) * 75.5);\n  }\n  .w-\\[calc\\(100\\%\\/2\\)\\] {\n    width: calc(100% / 2);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-69\\.5 {\n    max-width: calc(var(--spacing) * 69.5);\n  }\n  .max-w-75\\.5 {\n    max-width: calc(var(--spacing) * 75.5);\n  }\n  .max-w-\\[calc\\(100\\%\\/2\\)\\] {\n    max-width: calc(100% / 2);\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .min-w-max {\n    min-width: max-content;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-4 {\n    --tw-translate-y: calc(var(--spacing) * 4);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-circle-keys {\n    animation: var(--animate-circle-keys);\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .snap-x {\n    scroll-snap-type: x var(--tw-scroll-snap-strictness);\n  }\n  .snap-mandatory {\n    --tw-scroll-snap-strictness: mandatory;\n  }\n  .snap-start {\n    scroll-snap-align: start;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-x-1 {\n    column-gap: calc(var(--spacing) * 1);\n  }\n  .gap-x-2 {\n    column-gap: calc(var(--spacing) * 2);\n  }\n  .gap-y-3 {\n    row-gap: calc(var(--spacing) * 3);\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-2xl {\n    border-radius: var(--radius-2xl);\n  }\n  .rounded-3xl {\n    border-radius: var(--radius-3xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-black\\/50 {\n    border-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-orange-300 {\n    border-color: var(--color-orange-300);\n  }\n  .border-orange-400 {\n    border-color: var(--color-orange-400);\n  }\n  .bg-\\[\\#3D3D3D\\] {\n    background-color: #3D3D3D;\n  }\n  .bg-\\[\\#F8F8FA\\] {\n    background-color: #F8F8FA;\n  }\n  .bg-\\[\\#FFF0D3\\] {\n    background-color: #FFF0D3;\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-gray-100 {\n    background-color: var(--color-gray-100);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-orange-200 {\n    background-color: var(--color-orange-200);\n  }\n  .bg-orange-400 {\n    background-color: var(--color-orange-400);\n  }\n  .bg-orange-500 {\n    background-color: var(--color-orange-500);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-linear-to-l {\n    --tw-gradient-position: to left;\n    @supports (background-image: linear-gradient(in lab, red, red)) {\n      --tw-gradient-position: to left in oklab;\n    }\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-white {\n    --tw-gradient-from: var(--color-white);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-transparent {\n    --tw-gradient-to: transparent;\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(var(--spacing) * 2.5);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-px {\n    padding-block: 1px;\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-10 {\n    padding-right: calc(var(--spacing) * 10);\n  }\n  .pr-12 {\n    padding-right: calc(var(--spacing) * 12);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-nowrap {\n    text-wrap: nowrap;\n  }\n  .text-\\[\\#3D3D3D\\] {\n    color: #3D3D3D;\n  }\n  .text-\\[\\#7C7C7C\\] {\n    color: #7C7C7C;\n  }\n  .text-\\[\\#525252\\] {\n    color: #525252;\n  }\n  .text-\\[\\#656565\\] {\n    color: #656565;\n  }\n  .text-\\[\\#FF6B00\\] {\n    color: #FF6B00;\n  }\n  .text-\\[\\#FFF8EC\\] {\n    color: #FFF8EC;\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-black\\/85 {\n    color: color-mix(in srgb, #000 85%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 85%, transparent);\n    }\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-orange-500 {\n    color: var(--color-orange-500);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white\\/80 {\n    color: color-mix(in srgb, #fff 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 80%, transparent);\n    }\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-orange-blur {\n    --tw-shadow: 0 4px 20px 0 var(--tw-shadow-color, #a1440299);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-orange-400 {\n    --tw-shadow-color: oklch(75% 0.183 55.934);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-shadow-color: color-mix(in oklab, var(--color-orange-400) var(--tw-shadow-alpha), transparent);\n    }\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to,\n      opacity,\n      box-shadow,\n      transform,\n      translate,\n      scale,\n      rotate,\n      filter,\n      -webkit-backdrop-filter,\n      backdrop-filter,\n      display,\n      content-visibility,\n      overlay,\n      pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .focus-within\\:ring-2 {\n    &:focus-within {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow:\n        var(--tw-inset-shadow),\n        var(--tw-inset-ring-shadow),\n        var(--tw-ring-offset-shadow),\n        var(--tw-ring-shadow),\n        var(--tw-shadow);\n    }\n  }\n  .focus-within\\:ring-orange-300 {\n    &:focus-within {\n      --tw-ring-color: var(--color-orange-300);\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:text-orange-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-orange-500);\n      }\n    }\n  }\n  .hover\\:opacity-70 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 70%;\n      }\n    }\n  }\n  .hover\\:shadow-orange-blur-40 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 4px 40px 0 var(--tw-shadow-color, #a14402);\n        box-shadow:\n          var(--tw-inset-shadow),\n          var(--tw-inset-ring-shadow),\n          var(--tw-ring-offset-shadow),\n          var(--tw-ring-shadow),\n          var(--tw-shadow);\n      }\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:bg-gray-300 {\n    &:disabled {\n      background-color: var(--color-gray-300);\n    }\n  }\n  .mobile-360\\:w-\\[calc\\(100\\%\\/1\\.7\\)\\] {\n    @media (width >= 360px) {\n      width: calc(100% / 1.7);\n    }\n  }\n  .mobile-360\\:max-w-\\[calc\\(100\\%\\/1\\.7\\)\\] {\n    @media (width >= 360px) {\n      max-width: calc(100% / 1.7);\n    }\n  }\n  .mobile-430\\:w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 430px) {\n      width: calc(100% / 2.2);\n    }\n  }\n  .mobile-430\\:max-w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 430px) {\n      max-width: calc(100% / 2.2);\n    }\n  }\n  .sm\\:w-\\[calc\\(100\\%\\/2\\.5\\)\\] {\n    @media (width >= 40rem) {\n      width: calc(100% / 2.5);\n    }\n  }\n  .sm\\:max-w-\\[calc\\(100\\%\\/2\\.5\\)\\] {\n    @media (width >= 40rem) {\n      max-width: calc(100% / 2.5);\n    }\n  }\n  .md\\:w-\\[calc\\(100\\%\\/3\\)\\] {\n    @media (width >= 48rem) {\n      width: calc(100% / 3);\n    }\n  }\n  .md\\:max-w-\\[calc\\(100\\%\\/3\\)\\] {\n    @media (width >= 48rem) {\n      max-width: calc(100% / 3);\n    }\n  }\n  .lg\\:invisible {\n    @media (width >= 64rem) {\n      visibility: hidden;\n    }\n  }\n  .lg\\:visible {\n    @media (width >= 64rem) {\n      visibility: visible;\n    }\n  }\n  .lg\\:top-auto {\n    @media (width >= 64rem) {\n      top: auto;\n    }\n  }\n  .lg\\:right-1\\/2 {\n    @media (width >= 64rem) {\n      right: calc(1/2 * 100%);\n    }\n  }\n  .lg\\:right-5 {\n    @media (width >= 64rem) {\n      right: calc(var(--spacing) * 5);\n    }\n  }\n  .lg\\:bottom-25 {\n    @media (width >= 64rem) {\n      bottom: calc(var(--spacing) * 25);\n    }\n  }\n  .lg\\:hidden {\n    @media (width >= 64rem) {\n      display: none;\n    }\n  }\n  .lg\\:h-46 {\n    @media (width >= 64rem) {\n      height: calc(var(--spacing) * 46);\n    }\n  }\n  .lg\\:h-\\[calc\\(100vh-100px\\)\\] {\n    @media (width >= 64rem) {\n      height: calc(100vh - 100px);\n    }\n  }\n  .lg\\:max-h-201 {\n    @media (width >= 64rem) {\n      max-height: calc(var(--spacing) * 201);\n    }\n  }\n  .lg\\:w-115 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 115);\n    }\n  }\n  .lg\\:w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 64rem) {\n      width: calc(100% / 2.2);\n    }\n  }\n  .lg\\:w-\\[calc\\(100vw-100px\\)\\] {\n    @media (width >= 64rem) {\n      width: calc(100vw - 100px);\n    }\n  }\n  .lg\\:max-w-80 {\n    @media (width >= 64rem) {\n      max-width: calc(var(--spacing) * 80);\n    }\n  }\n  .lg\\:max-w-289 {\n    @media (width >= 64rem) {\n      max-width: calc(var(--spacing) * 289);\n    }\n  }\n  .lg\\:max-w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 64rem) {\n      max-width: calc(100% / 2.2);\n    }\n  }\n  .lg\\:translate-x-1\\/2 {\n    @media (width >= 64rem) {\n      --tw-translate-x: calc(1/2 * 100%);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .lg\\:flex-wrap {\n    @media (width >= 64rem) {\n      flex-wrap: wrap;\n    }\n  }\n  .lg\\:gap-x-2 {\n    @media (width >= 64rem) {\n      column-gap: calc(var(--spacing) * 2);\n    }\n  }\n  .lg\\:rounded-4xl {\n    @media (width >= 64rem) {\n      border-radius: var(--radius-4xl);\n    }\n  }\n  .lg\\:hover\\:shadow {\n    @media (width >= 64rem) {\n      &:hover {\n        @media (hover: hover) {\n          --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n          box-shadow:\n            var(--tw-inset-shadow),\n            var(--tw-inset-ring-shadow),\n            var(--tw-ring-offset-shadow),\n            var(--tw-ring-shadow),\n            var(--tw-shadow);\n        }\n      }\n    }\n  }\n}\n@layer base {\n  * {\n    font-family: var(--font-sukhumvit);\n  }\n}\n@layer utilities {\n  .scrollbar-hide::-webkit-scrollbar {\n    display: none;\n  }\n  .scrollbar-hide {\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n  .animation-delay-0 {\n    animation-delay: 0s;\n  }\n  .animation-delay-300 {\n    animation-delay: 0.3s;\n  }\n  .animation-delay-600 {\n    animation-delay: 0.6s;\n  }\n  .animation-delay-900 {\n    animation-delay: 0.9s;\n  }\n  .animation-delay-1200 {\n    animation-delay: 1.2s;\n  }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@keyframes circle-keys {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(0.7);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n');
+styleInject('/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-orange-200: oklch(90.1% 0.076 70.697);\n    --color-orange-300: oklch(83.7% 0.128 66.29);\n    --color-orange-400: oklch(75% 0.183 55.934);\n    --color-orange-500: oklch(70.5% 0.213 47.604);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-sm: 0.25rem;\n    --radius-2xl: 1rem;\n    --radius-3xl: 1.5rem;\n    --radius-4xl: 2rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --font-sukhumvit:\n      "Sukhumvit Set",\n      ui-sans-serif,\n      system-ui,\n      sans-serif;\n    --animate-circle-keys: circle-keys 2s ease-in-out infinite;\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-5 {\n    right: calc(var(--spacing) * 5);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-5 {\n    bottom: calc(var(--spacing) * 5);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-3000 {\n    z-index: 3000;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .-mx-4 {\n    margin-inline: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-auto {\n    margin-top: auto;\n  }\n  .mr-3 {\n    margin-right: calc(var(--spacing) * 3);\n  }\n  .mr-auto {\n    margin-right: auto;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-14 {\n    height: calc(var(--spacing) * 14);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-29\\.5 {\n    height: calc(var(--spacing) * 29.5);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-25 {\n    max-height: calc(var(--spacing) * 25);\n  }\n  .min-h-12 {\n    min-height: calc(var(--spacing) * 12);\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-75\\.5 {\n    width: calc(var(--spacing) * 75.5);\n  }\n  .w-\\[calc\\(100\\%\\/1\\.3\\)\\] {\n    width: calc(100% / 1.3);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-2\\/3 {\n    max-width: calc(2/3 * 100%);\n  }\n  .max-w-69\\.5 {\n    max-width: calc(var(--spacing) * 69.5);\n  }\n  .max-w-80 {\n    max-width: calc(var(--spacing) * 80);\n  }\n  .max-w-\\[calc\\(100\\%\\/1\\.3\\)\\] {\n    max-width: calc(100% / 1.3);\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-\\[100px\\] {\n    min-width: 100px;\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .min-w-max {\n    min-width: max-content;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-4 {\n    --tw-translate-y: calc(var(--spacing) * 4);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-circle-keys {\n    animation: var(--animate-circle-keys);\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .snap-x {\n    scroll-snap-type: x var(--tw-scroll-snap-strictness);\n  }\n  .snap-mandatory {\n    --tw-scroll-snap-strictness: mandatory;\n  }\n  .snap-start {\n    scroll-snap-align: start;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .space-y-1 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .gap-x-1 {\n    column-gap: calc(var(--spacing) * 1);\n  }\n  .gap-x-2 {\n    column-gap: calc(var(--spacing) * 2);\n  }\n  .gap-y-3 {\n    row-gap: calc(var(--spacing) * 3);\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-2xl {\n    border-radius: var(--radius-2xl);\n  }\n  .rounded-3xl {\n    border-radius: var(--radius-3xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-black\\/50 {\n    border-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .border-blue-500 {\n    border-color: var(--color-blue-500);\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-orange-300 {\n    border-color: var(--color-orange-300);\n  }\n  .border-orange-400 {\n    border-color: var(--color-orange-400);\n  }\n  .bg-\\[\\#3D3D3D\\] {\n    background-color: #3D3D3D;\n  }\n  .bg-\\[\\#F8F8FA\\] {\n    background-color: #F8F8FA;\n  }\n  .bg-\\[\\#FFF0D3\\] {\n    background-color: #FFF0D3;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-100 {\n    background-color: var(--color-gray-100);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-orange-200 {\n    background-color: var(--color-orange-200);\n  }\n  .bg-orange-400 {\n    background-color: var(--color-orange-400);\n  }\n  .bg-orange-500 {\n    background-color: var(--color-orange-500);\n  }\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-linear-to-l {\n    --tw-gradient-position: to left;\n    @supports (background-image: linear-gradient(in lab, red, red)) {\n      --tw-gradient-position: to left in oklab;\n    }\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-white {\n    --tw-gradient-from: var(--color-white);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-transparent {\n    --tw-gradient-to: transparent;\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(var(--spacing) * 2.5);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-px {\n    padding-block: 1px;\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-1 {\n    padding-right: calc(var(--spacing) * 1);\n  }\n  .pr-10 {\n    padding-right: calc(var(--spacing) * 10);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-nowrap {\n    text-wrap: nowrap;\n  }\n  .wrap-break-word {\n    overflow-wrap: break-word;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#3D3D3D\\] {\n    color: #3D3D3D;\n  }\n  .text-\\[\\#7C7C7C\\] {\n    color: #7C7C7C;\n  }\n  .text-\\[\\#525252\\] {\n    color: #525252;\n  }\n  .text-\\[\\#656565\\] {\n    color: #656565;\n  }\n  .text-\\[\\#FF6B00\\] {\n    color: #FF6B00;\n  }\n  .text-\\[\\#FFF8EC\\] {\n    color: #FFF8EC;\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-black\\/85 {\n    color: color-mix(in srgb, #000 85%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-black) 85%, transparent);\n    }\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-orange-500 {\n    color: var(--color-orange-500);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-white\\/80 {\n    color: color-mix(in srgb, #fff 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      color: color-mix(in oklab, var(--color-white) 80%, transparent);\n    }\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-orange-blur {\n    --tw-shadow: 0 4px 20px 0 var(--tw-shadow-color, #a1440299);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-orange-blur-16 {\n    --tw-shadow: 0 0px 16px 4px var(--tw-shadow-color, #fff0d3);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .shadow-orange-400 {\n    --tw-shadow-color: oklch(75% 0.183 55.934);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-shadow-color: color-mix(in oklab, var(--color-orange-400) var(--tw-shadow-alpha), transparent);\n    }\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to,\n      opacity,\n      box-shadow,\n      transform,\n      translate,\n      scale,\n      rotate,\n      filter,\n      -webkit-backdrop-filter,\n      backdrop-filter,\n      display,\n      content-visibility,\n      overlay,\n      pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .focus-within\\:ring-2 {\n    &:focus-within {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow:\n        var(--tw-inset-shadow),\n        var(--tw-inset-ring-shadow),\n        var(--tw-ring-offset-shadow),\n        var(--tw-ring-shadow),\n        var(--tw-shadow);\n    }\n  }\n  .focus-within\\:ring-orange-300 {\n    &:focus-within {\n      --tw-ring-color: var(--color-orange-300);\n    }\n  }\n  .hover\\:bg-blue-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-600);\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-red-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-600);\n      }\n    }\n  }\n  .hover\\:text-orange-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-orange-500);\n      }\n    }\n  }\n  .hover\\:opacity-70 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 70%;\n      }\n    }\n  }\n  .hover\\:shadow-orange-blur-40 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 4px 40px 0 var(--tw-shadow-color, #a14402);\n        box-shadow:\n          var(--tw-inset-shadow),\n          var(--tw-inset-ring-shadow),\n          var(--tw-ring-offset-shadow),\n          var(--tw-ring-shadow),\n          var(--tw-shadow);\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow:\n        var(--tw-inset-shadow),\n        var(--tw-inset-ring-shadow),\n        var(--tw-ring-offset-shadow),\n        var(--tw-ring-shadow),\n        var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:bg-gray-300 {\n    &:disabled {\n      background-color: var(--color-gray-300);\n    }\n  }\n  .disabled\\:bg-gray-400 {\n    &:disabled {\n      background-color: var(--color-gray-400);\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .mobile-360\\:w-\\[calc\\(100\\%\\/1\\.7\\)\\] {\n    @media (width >= 360px) {\n      width: calc(100% / 1.7);\n    }\n  }\n  .mobile-360\\:max-w-\\[calc\\(100\\%\\/1\\.7\\)\\] {\n    @media (width >= 360px) {\n      max-width: calc(100% / 1.7);\n    }\n  }\n  .mobile-430\\:w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 430px) {\n      width: calc(100% / 2.2);\n    }\n  }\n  .mobile-430\\:max-w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 430px) {\n      max-width: calc(100% / 2.2);\n    }\n  }\n  .sm\\:w-\\[calc\\(100\\%\\/2\\.5\\)\\] {\n    @media (width >= 40rem) {\n      width: calc(100% / 2.5);\n    }\n  }\n  .sm\\:max-w-\\[calc\\(100\\%\\/2\\.5\\)\\] {\n    @media (width >= 40rem) {\n      max-width: calc(100% / 2.5);\n    }\n  }\n  .md\\:w-\\[calc\\(100\\%\\/3\\)\\] {\n    @media (width >= 48rem) {\n      width: calc(100% / 3);\n    }\n  }\n  .md\\:max-w-\\[calc\\(100\\%\\/3\\)\\] {\n    @media (width >= 48rem) {\n      max-width: calc(100% / 3);\n    }\n  }\n  .lg\\:invisible {\n    @media (width >= 64rem) {\n      visibility: hidden;\n    }\n  }\n  .lg\\:visible {\n    @media (width >= 64rem) {\n      visibility: visible;\n    }\n  }\n  .lg\\:top-auto {\n    @media (width >= 64rem) {\n      top: auto;\n    }\n  }\n  .lg\\:right-1\\/2 {\n    @media (width >= 64rem) {\n      right: calc(1/2 * 100%);\n    }\n  }\n  .lg\\:right-5 {\n    @media (width >= 64rem) {\n      right: calc(var(--spacing) * 5);\n    }\n  }\n  .lg\\:bottom-25 {\n    @media (width >= 64rem) {\n      bottom: calc(var(--spacing) * 25);\n    }\n  }\n  .lg\\:hidden {\n    @media (width >= 64rem) {\n      display: none;\n    }\n  }\n  .lg\\:h-\\[calc\\(100vh-100px\\)\\] {\n    @media (width >= 64rem) {\n      height: calc(100vh - 100px);\n    }\n  }\n  .lg\\:h-auto {\n    @media (width >= 64rem) {\n      height: auto;\n    }\n  }\n  .lg\\:max-h-28 {\n    @media (width >= 64rem) {\n      max-height: calc(var(--spacing) * 28);\n    }\n  }\n  .lg\\:max-h-201 {\n    @media (width >= 64rem) {\n      max-height: calc(var(--spacing) * 201);\n    }\n  }\n  .lg\\:w-115 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 115);\n    }\n  }\n  .lg\\:w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 64rem) {\n      width: calc(100% / 2.2);\n    }\n  }\n  .lg\\:w-\\[calc\\(100\\%\\/4\\.6\\)\\] {\n    @media (width >= 64rem) {\n      width: calc(100% / 4.6);\n    }\n  }\n  .lg\\:w-\\[calc\\(100vw-100px\\)\\] {\n    @media (width >= 64rem) {\n      width: calc(100vw - 100px);\n    }\n  }\n  .lg\\:max-w-289 {\n    @media (width >= 64rem) {\n      max-width: calc(var(--spacing) * 289);\n    }\n  }\n  .lg\\:max-w-\\[calc\\(100\\%\\/2\\.2\\)\\] {\n    @media (width >= 64rem) {\n      max-width: calc(100% / 2.2);\n    }\n  }\n  .lg\\:max-w-\\[calc\\(100\\%\\/4\\.6\\)\\] {\n    @media (width >= 64rem) {\n      max-width: calc(100% / 4.6);\n    }\n  }\n  .lg\\:translate-x-1\\/2 {\n    @media (width >= 64rem) {\n      --tw-translate-x: calc(1/2 * 100%);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .lg\\:flex-wrap {\n    @media (width >= 64rem) {\n      flex-wrap: wrap;\n    }\n  }\n  .lg\\:gap-x-2 {\n    @media (width >= 64rem) {\n      column-gap: calc(var(--spacing) * 2);\n    }\n  }\n  .lg\\:rounded-4xl {\n    @media (width >= 64rem) {\n      border-radius: var(--radius-4xl);\n    }\n  }\n  .lg\\:hover\\:shadow {\n    @media (width >= 64rem) {\n      &:hover {\n        @media (hover: hover) {\n          --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n          box-shadow:\n            var(--tw-inset-shadow),\n            var(--tw-inset-ring-shadow),\n            var(--tw-ring-offset-shadow),\n            var(--tw-ring-shadow),\n            var(--tw-shadow);\n        }\n      }\n    }\n  }\n}\n@layer base {\n  * {\n    font-family: var(--font-sukhumvit);\n  }\n}\n@layer utilities {\n  .scrollbar-hide::-webkit-scrollbar {\n    display: none;\n  }\n  .scrollbar-hide {\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n  }\n  .custom-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: #cbd5e1 #f1f5f9;\n    scrollbar-gutter: stable;\n  }\n  .custom-scrollbar::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  }\n  .custom-scrollbar::-webkit-scrollbar-track {\n    background: #f1f5f9;\n    border-radius: 9999px;\n  }\n  .custom-scrollbar::-webkit-scrollbar-thumb {\n    background: #cbd5e1;\n    border-radius: 9999px;\n    border: 2px solid #f1f5f9;\n  }\n  .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n    background: #9ca3af;\n  }\n  .animation-delay-0 {\n    animation-delay: 0s;\n  }\n  .animation-delay-300 {\n    animation-delay: 0.3s;\n  }\n  .animation-delay-600 {\n    animation-delay: 0.6s;\n  }\n  .animation-delay-900 {\n    animation-delay: 0.9s;\n  }\n  .animation-delay-1200 {\n    animation-delay: 1.2s;\n  }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; }\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@keyframes circle-keys {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(0.7);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n');
 
 // src/utils/cn.ts
 var import_clsx = require("clsx");
@@ -568,8 +572,7 @@ var defaultFailMenu = [
 var defaultQuickMenuChips = [
   { id: "1", title: "\u0E0B\u0E37\u0E49\u0E2D\u0E02\u0E2D\u0E07/\u0E0A\u0E33\u0E23\u0E30\u0E40\u0E07\u0E34\u0E19\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", value: "\u0E0B\u0E37\u0E49\u0E2D\u0E02\u0E2D\u0E07/\u0E0A\u0E33\u0E23\u0E30\u0E40\u0E07\u0E34\u0E19\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", mockResponse: "QUICK_MENU_PAYMENT_FAILED" /* QUICK_MENU_PAYMENT_FAILED */ },
   { id: "2", title: "\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", value: "\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", mockResponse: "CODE_CANT_USE" /* CODE_CANT_USE */ },
-  { id: "3", title: "\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", value: "\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", mockResponse: "CODE_CANT_USE" /* CODE_CANT_USE */ },
-  { id: "4", title: "\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", value: "\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49", mockResponse: "CODE_CANT_USE" /* CODE_CANT_USE */ }
+  { id: "3", title: "\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32", value: "\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32", mockResponse: "CODE_CANT_USE" /* CODE_CANT_USE */ }
 ];
 var budgetRanges = [
   { id: "1", title: "\u0E15\u0E48\u0E33\u0E01\u0E27\u0E48\u0E32 10,000 \u0E1A\u0E32\u0E17", value: "\u0E15\u0E48\u0E33\u0E01\u0E27\u0E48\u0E32 10,000 \u0E1A\u0E32\u0E17", mockResponse: "NOTFOUND_PRODUCT" /* NOTFOUND_PRODUCT */ },
@@ -771,15 +774,169 @@ var mockMessages = [
   __spreadValues({}, mockResponse["PRODUCT_PHONE_ALL" /* PRODUCT_PHONE_ALL */])
 ];
 
-// src/hooks/use-openchat.tsx
+// src/contexts/aizu-client-context.tsx
+var import_react3 = require("react");
+
+// src/hooks/use-aizu-chat.ts
+var import_react2 = require("react");
+
+// src/hooks/use-local-storage.ts
 var import_react = require("react");
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+  const setValue = (0, import_react.useCallback)(
+    (value) => {
+      try {
+        setStoredValue(value);
+        if (typeof window !== "undefined") {
+          window.localStorage.setItem(key, JSON.stringify(value));
+        }
+      } catch (error) {
+        console.error(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key]
+  );
+  const clearValue = (0, import_react.useCallback)(() => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(key);
+      }
+    } catch (error) {
+      console.error(`Error clearing localStorage key "${key}":`, error);
+    }
+  }, [key, initialValue]);
+  return [storedValue, setValue, clearValue];
+}
+
+// src/hooks/use-aizu-chat.ts
+var useAizuChat = (client) => {
+  const [threadId, setThreadId, clearThreadId] = useLocalStorage(
+    "aizu_thread_id",
+    null
+  );
+  const [resourceId, setResourceId, clearResourceId] = useLocalStorage("aizu_resource_id", null);
+  const abortControllerRef = (0, import_react2.useRef)(null);
+  const sendMessage = (0, import_react2.useCallback)(
+    (query) => __async(null, null, function* () {
+      var _a;
+      if (!query || !query.trim()) {
+        return { success: false, message: "Query cannot be empty" };
+      }
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      const params = __spreadValues(__spreadValues({
+        query
+      }, threadId && { thread_id: threadId }), resourceId && { resource_id: resourceId });
+      try {
+        const response = yield client.chat(params, {
+          signal: controller.signal
+        });
+        if (response.thread_id && response.thread_id !== threadId) {
+          setThreadId(response.thread_id);
+        }
+        if (response.resource_id && response.resource_id !== resourceId) {
+          setResourceId(response.resource_id);
+        }
+        return { success: true, data: response };
+      } catch (error) {
+        if (error instanceof Error && error.message === "Request cancelled by user") {
+          return { success: false, message: "Cancelled by user" };
+        }
+        return {
+          success: false,
+          message: "Failed to send message"
+        };
+      } finally {
+        if (abortControllerRef.current === controller) {
+          abortControllerRef.current = null;
+        }
+      }
+    }),
+    [client, threadId, resourceId, setThreadId, setResourceId]
+  );
+  const clearConversation = (0, import_react2.useCallback)(() => {
+    clearThreadId();
+    clearResourceId();
+  }, [clearThreadId, clearResourceId]);
+  const cancelRequest = (0, import_react2.useCallback)(() => {
+    var _a;
+    (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    abortControllerRef.current = null;
+  }, []);
+  return {
+    sendMessage,
+    clearConversation,
+    cancelRequest,
+    threadId,
+    resourceId
+  };
+};
+
+// src/contexts/aizu-client-context.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AizuClientContext = (0, import_react3.createContext)(
+  void 0
+);
+var AizuClientProvider = ({
+  children,
+  client
+}) => {
+  const {
+    sendMessage,
+    clearConversation,
+    threadId,
+    resourceId,
+    cancelRequest
+  } = useAizuChat(client);
+  const value = (0, import_react3.useMemo)(
+    () => ({
+      aizuClient: client,
+      threadId,
+      resourceId,
+      sendMessage,
+      clearConversation,
+      cancelRequest
+    }),
+    [
+      client,
+      threadId,
+      resourceId,
+      sendMessage,
+      clearConversation,
+      cancelRequest
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AizuClientContext.Provider, { value, children });
+};
+var useAizuClient = () => {
+  const context = (0, import_react3.useContext)(AizuClientContext);
+  if (!context) {
+    throw new Error("useAizuClient must be used within AizuClientProvider");
+  }
+  return context;
+};
+
+// src/hooks/use-openchat.tsx
+var import_react4 = require("react");
 var COLLAPSE_DELAY = 300;
 var useOpenChat = () => {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const [isExpanded, setIsExpanded] = (0, import_react.useState)(false);
-  const timerRef = (0, import_react.useRef)(null);
-  const openChat = (0, import_react.useCallback)(() => setIsOpen(true), []);
-  const closeChat = (0, import_react.useCallback)(() => {
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react4.useState)(false);
+  const timerRef = (0, import_react4.useRef)(null);
+  const openChat = (0, import_react4.useCallback)(() => setIsOpen(true), []);
+  const closeChat = (0, import_react4.useCallback)(() => {
     setIsOpen(false);
     if (isExpanded) {
       if (timerRef.current) {
@@ -791,9 +948,9 @@ var useOpenChat = () => {
       }, COLLAPSE_DELAY);
     }
   }, [isExpanded]);
-  const toggleChat = (0, import_react.useCallback)(() => setIsOpen((prev) => !prev), []);
-  const toggleExpand = (0, import_react.useCallback)(() => setIsExpanded((prev) => !prev), []);
-  (0, import_react.useEffect)(() => {
+  const toggleChat = (0, import_react4.useCallback)(() => setIsOpen((prev) => !prev), []);
+  const toggleExpand = (0, import_react4.useCallback)(() => setIsExpanded((prev) => !prev), []);
+  (0, import_react4.useEffect)(() => {
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -812,15 +969,16 @@ var useOpenChat = () => {
 };
 
 // src/contexts/chat-context.tsx
-var import_react2 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ChatContext = (0, import_react2.createContext)(void 0);
+var import_react5 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChatContext = (0, import_react5.createContext)(void 0);
 var ChatProvider = ({ children }) => {
-  const [messages, setMessages] = (0, import_react2.useState)([]);
-  const [latestMessage, setLatestMessage] = (0, import_react2.useState)();
+  const [messages, setMessages] = (0, import_react5.useState)([]);
+  const [userMessages, setUserMessages] = (0, import_react5.useState)([]);
+  const [latestMessage, setLatestMessage] = (0, import_react5.useState)();
   const chatControls = useOpenChat();
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
-  const addUserMessage = (0, import_react2.useCallback)((text) => {
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+  const addUserMessage = (0, import_react5.useCallback)((text) => {
     const newText = text.includes(tryAgain) ? (latestMessage == null ? void 0 : latestMessage.text) || "" : text;
     const newMessage = {
       id: Date.now().toString() + Math.random().toString(),
@@ -829,20 +987,21 @@ var ChatProvider = ({ children }) => {
     };
     setLatestMessage(newMessage);
     setMessages((prev) => [...prev, newMessage]);
+    setUserMessages((prev) => [...prev, newMessage]);
     setIsLoading(true);
   }, [latestMessage == null ? void 0 : latestMessage.text]);
-  const addBotMessage = (0, import_react2.useCallback)((message) => __async(null, null, function* () {
-    yield new Promise((resolve) => setTimeout(resolve, Math.random() * 2e3 + 1e3));
+  const addBotMessage = (0, import_react5.useCallback)((message) => __async(null, null, function* () {
     setIsLoading(false);
     const newMessage = __spreadProps(__spreadValues({}, message), {
       id: Date.now().toString() + Math.random().toString()
     });
     setMessages((prev) => [...prev, newMessage]);
   }), []);
-  const clearMessages = (0, import_react2.useCallback)(() => setMessages([]), []);
-  const value = (0, import_react2.useMemo)(
+  const clearMessages = (0, import_react5.useCallback)(() => setMessages([]), []);
+  const value = (0, import_react5.useMemo)(
     () => ({
       messages,
+      userMessages,
       latestMessage,
       isLoading,
       setIsLoading,
@@ -851,43 +1010,311 @@ var ChatProvider = ({ children }) => {
       clearMessages,
       chatControls
     }),
-    [messages, latestMessage, isLoading, chatControls, addUserMessage, addBotMessage, clearMessages]
+    [messages, userMessages, latestMessage, isLoading, chatControls, addUserMessage, addBotMessage, clearMessages]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChatContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatContext.Provider, { value, children });
 };
 var useChatContext = () => {
-  const context = (0, import_react2.useContext)(ChatContext);
+  const context = (0, import_react5.useContext)(ChatContext);
   if (!context) {
     throw new Error("useChatContext must be used within ChatProvider");
   }
   return context;
 };
 
-// src/utils/message.ts
-var getMockBotMessage = (menu) => {
-  const newMessage = mockResponse[menu.mockResponse];
-  return newMessage ? newMessage : mockResponse["ERROR" /* ERROR */];
+// src/sdk/client.ts
+var AizuClient = class {
+  constructor(config) {
+    const { hostUrl, apiKey, timeout } = config;
+    if (typeof hostUrl !== "string" || hostUrl.trim().length === 0) {
+      throw new Error(
+        "Invalid AizuClient configuration: 'hostUrl' must be a non-empty string."
+      );
+    }
+    if (typeof apiKey !== "string" || apiKey.trim().length === 0) {
+      throw new Error(
+        "Invalid AizuClient configuration: 'apiKey' must be a non-empty string."
+      );
+    }
+    this.hostUrl = hostUrl;
+    this.apiKey = apiKey;
+    this.timeout = timeout != null ? timeout : 3e4;
+  }
+  request(_0) {
+    return __async(this, arguments, function* (path, options = {}) {
+      const url = `${this.hostUrl}${path}`;
+      const _a = options, { body, signal: externalSignal } = _a, restOptions = __objRest(_a, ["body", "signal"]);
+      const timeoutController = new AbortController();
+      const timeoutId = setTimeout(() => timeoutController.abort(), this.timeout);
+      let abortController = null;
+      let abortHandler = null;
+      let abortReason = null;
+      const combinedSignal = externalSignal ? (() => {
+        abortController = new AbortController();
+        const userAbortHandler = () => {
+          if (!abortReason) abortReason = "user";
+          abortController == null ? void 0 : abortController.abort();
+          clearTimeout(timeoutId);
+        };
+        const timeoutAbortHandler = () => {
+          if (!abortReason) abortReason = "timeout";
+          abortController == null ? void 0 : abortController.abort();
+        };
+        const listeners = [
+          { signal: externalSignal, handler: userAbortHandler },
+          { signal: timeoutController.signal, handler: timeoutAbortHandler }
+        ];
+        listeners.forEach(({ signal, handler }) => {
+          signal.addEventListener("abort", handler);
+        });
+        abortHandler = () => {
+          listeners.forEach(({ signal, handler }) => {
+            signal.removeEventListener("abort", handler);
+          });
+        };
+        return abortController.signal;
+      })() : timeoutController.signal;
+      try {
+        const response = yield fetch(url, __spreadProps(__spreadValues({}, restOptions), {
+          signal: combinedSignal,
+          headers: __spreadValues({
+            "Content-Type": "application/json",
+            "x-api-key": this.apiKey
+          }, options.headers),
+          body: body ? JSON.stringify(body) : void 0
+        }));
+        if (!response.ok) {
+          const errorBody = yield response.text().catch(() => "");
+          const errorMessage = `API Error: ${response.status} ${response.statusText}${errorBody ? ` - ${errorBody}` : ""}`;
+          throw new Error(errorMessage);
+        }
+        return yield response.json();
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          if (abortReason === "user") {
+            throw new Error("Request cancelled by user");
+          }
+          if (abortReason === "timeout") {
+            throw new Error(
+              "Request timeout: The server took too long to respond"
+            );
+          }
+          throw new Error("Request was aborted");
+        }
+        throw error;
+      } finally {
+        clearTimeout(timeoutId);
+        if (abortHandler) {
+          abortHandler();
+        }
+      }
+    });
+  }
+  chat(params, options) {
+    return __async(this, null, function* () {
+      if (!params.query.trim()) {
+        throw new Error("Query is required");
+      }
+      return this.request("/chat/query", {
+        method: "POST",
+        body: params,
+        signal: options == null ? void 0 : options.signal
+      });
+    });
+  }
+};
+var createAizuClient = ({
+  hostUrl,
+  apiKey,
+  timeout
+}) => {
+  return new AizuClient({ hostUrl, apiKey, timeout });
 };
-var getMockBotMessageByText = (text) => {
-  const menu = searchableMenus.find((menu2) => menu2.title.includes(text));
-  if (menu == null ? void 0 : menu.mockRetryResponse) {
-    return mockResponse[menu.mockRetryResponse];
+
+// src/sdk/types.ts
+var TypeResponse = /* @__PURE__ */ ((TypeResponse2) => {
+  TypeResponse2["SUGGEST_PRODUCTS"] = "suggest_products";
+  TypeResponse2["REQUEST_CLARIFICATION"] = "request_clarification";
+  TypeResponse2["START_SHOPPING"] = "start_shopping";
+  return TypeResponse2;
+})(TypeResponse || {});
+
+// src/utils/message.ts
+var getMessage = (result) => {
+  var _a, _b;
+  if (!result.success) return mockResponse["ERROR" /* ERROR */];
+  const products = ((_a = result.data) == null ? void 0 : _a.products) || [];
+  if (((_b = result.data) == null ? void 0 : _b.type) && result.data.type === "start_shopping" /* START_SHOPPING */) {
+    return mockResponse["QUICK_MENU_SHOP" /* QUICK_MENU_SHOP */];
   }
-  if (!menu) {
+  if (!result.data.response && products.length === 0) {
     return mockResponse["ERROR" /* ERROR */];
   }
-  const newMessage = mockResponse[menu.mockResponse];
-  return newMessage ? newMessage : mockResponse["ERROR" /* ERROR */];
+  const newMessage = {
+    id: Date.now().toString() + Math.random().toString(),
+    text: result.data.response,
+    type: "BOT_TEXT" /* BOT_TEXT */
+  };
+  if (products.length > 0) {
+    newMessage.type = "BOT_TEXT_WITH_PRODUCTS" /* BOT_TEXT_WITH_PRODUCTS */;
+    newMessage.products = products;
+  }
+  return newMessage;
+};
+
+// src/hooks/use-send-chat.ts
+var import_react6 = require("react");
+var DEBOUNCE_TIMEOUT = 300;
+var useSendChat = ({ addBotMessage, addUserMessage, sendMessage, setIsLoading, isLoading, latestMessage }) => {
+  const clickTimeoutRef = (0, import_react6.useRef)(null);
+  const handleSendMessage = (0, import_react6.useCallback)(
+    (message) => __async(null, null, function* () {
+      addUserMessage(message);
+      const result = yield sendMessage(message);
+      if (result.success) {
+        const message2 = getMessage(result);
+        addBotMessage(message2);
+      } else {
+        if (result.message.includes("Cancelled by user")) return setIsLoading(false);
+        const botMessage = __spreadProps(__spreadValues({}, mockResponse["ERROR" /* ERROR */]), {
+          id: Date.now().toString(),
+          type: "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */
+        });
+        addBotMessage(botMessage);
+      }
+    }),
+    [addUserMessage, addBotMessage, sendMessage, setIsLoading]
+  );
+  const handleClickMenuRaw = (0, import_react6.useCallback)(
+    (menu) => __async(null, null, function* () {
+      if (isLoading) return;
+      if (menu.title.includes(tryAgain) && !!(latestMessage == null ? void 0 : latestMessage.text)) {
+        return handleSendMessage(latestMessage == null ? void 0 : latestMessage.text);
+      }
+      yield handleSendMessage(menu.title);
+    }),
+    [handleSendMessage, latestMessage == null ? void 0 : latestMessage.text, isLoading]
+  );
+  const handleClickMenu = (0, import_react6.useCallback)(
+    (menu) => __async(null, null, function* () {
+      if (clickTimeoutRef.current) {
+        clearTimeout(clickTimeoutRef.current);
+      }
+      clickTimeoutRef.current = setTimeout(() => {
+        handleClickMenuRaw(menu);
+      }, DEBOUNCE_TIMEOUT);
+    }),
+    [handleClickMenuRaw]
+  );
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      if (clickTimeoutRef.current) {
+        clearTimeout(clickTimeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    handleSendMessage,
+    handleClickMenu
+  };
 };
 
 // src/components/aizu-chat.tsx
-var import_react4 = require("react");
+var import_react9 = require("react");
+
+// src/hooks/use-keyboard.ts
+var import_react7 = require("react");
+var useKeyboard = ({ userMessages, isLoading, onSend }) => {
+  const [value, setValue] = (0, import_react7.useState)("");
+  const [historyIndex, setHistoryIndex] = (0, import_react7.useState)((userMessages == null ? void 0 : userMessages.length) || 0);
+  const textareaRef = (0, import_react7.useRef)(null);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isLoading) return;
+    const message = value;
+    if ((message == null ? void 0 : message.trim()) && onSend) {
+      onSend(message);
+      setValue("");
+    }
+  };
+  const handleKeyDown = (e) => {
+    var _a, _b, _c, _d;
+    const key = e.key;
+    if (key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+    const matchIndex = userMessages.findIndex((m) => m.text === value);
+    const canNavigate = !value || matchIndex !== -1;
+    if (!canNavigate) return;
+    if (key === "ArrowUp") {
+      e.preventDefault();
+      if (userMessages.length === 0) return;
+      const next = historyIndex === userMessages.length ? userMessages.length - 1 : Math.max(0, historyIndex - 1);
+      setHistoryIndex(next);
+      setValue((_b = (_a = userMessages[next]) == null ? void 0 : _a.text) != null ? _b : "");
+      return;
+    }
+    if (key === "ArrowDown") {
+      e.preventDefault();
+      if (userMessages.length === 0) return;
+      const next = historyIndex >= userMessages.length - 1 ? userMessages.length : historyIndex + 1;
+      setHistoryIndex(next);
+      setValue(next === userMessages.length ? "" : (_d = (_c = userMessages[next]) == null ? void 0 : _c.text) != null ? _d : "");
+    }
+  };
+  const adjustTextareaHeight = (0, import_react7.useCallback)(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    const newHeight = Math.min(textarea.scrollHeight, 100);
+    textarea.style.height = `${newHeight}px`;
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    setHistoryIndex(userMessages.length);
+  }, [userMessages.length]);
+  (0, import_react7.useEffect)(() => {
+    adjustTextareaHeight();
+  }, [value, adjustTextareaHeight]);
+  (0, import_react7.useEffect)(() => {
+    var _a, _b;
+    let rafId = 0;
+    const resizeHandler = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        adjustTextareaHeight();
+      });
+    };
+    window.addEventListener("resize", resizeHandler);
+    let ro = null;
+    const target = (_b = (_a = textareaRef.current) == null ? void 0 : _a.parentElement) != null ? _b : textareaRef.current;
+    if (target && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(resizeHandler);
+      ro.observe(target);
+    }
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+      if (ro) ro.disconnect();
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [adjustTextareaHeight]);
+  return {
+    value,
+    handleChange,
+    handleSubmit,
+    handleKeyDown,
+    textareaRef
+  };
+};
 
 // src/components/input-bar/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ButtonSelectImage = (_a) => {
   var _b = _a, { onClick, className } = _b, props = __objRest(_b, ["onClick", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type: "button",
@@ -898,50 +1325,24 @@ var ButtonSelectImage = (_a) => {
       ),
       "aria-label": "Upload image"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconImagePlus, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconImagePlus, {})
     })
   );
 };
-var InputText = (_a) => {
+var InputTextArea = (_a) => {
   var _b = _a, { onMagicClick, placeholder, className } = _b, props = __objRest(_b, ["onMagicClick", "placeholder", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "input",
-      __spreadValues({
-        type: "text",
-        name: "message",
-        placeholder,
-        className: cn(
-          "w-full pr-12  bg-gray-100 outline-none ",
-          className
-        ),
-        onKeyDown: (e) => {
-          var _a2;
-          if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            (_a2 = e.currentTarget.form) == null ? void 0 : _a2.requestSubmit();
-          }
-        }
-      }, props)
-    ),
-    onMagicClick && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: onMagicClick,
-        className: "absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center hover:bg-gray-200 rounded-full transition-colors",
-        "aria-label": "AI assist",
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: "Magic/AI Icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 2L15 8.5L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L9 8.5L12 2Z" })
-        ] })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 relative", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "textarea",
+    __spreadValues({
+      placeholder,
+      rows: 1,
+      className: "flex-1 pr-1 resize-none max-h-25 w-full text-sm custom-scrollbar  focus:outline-none overflow-y-auto"
+    }, props)
+  ) });
 };
 var ButtonConfirm = (_a) => {
   var _b = _a, { className, disabled } = _b, props = __objRest(_b, ["className", "disabled"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type: "submit",
@@ -956,73 +1357,100 @@ var ButtonConfirm = (_a) => {
       "aria-label": "Send message",
       disabled
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconArrowNarrowUp, { className: "text-black" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconArrowNarrowUp, { className: "text-black" })
     })
   );
 };
+var ButtonCancel = () => {
+  const { cancelRequest } = useAizuClient();
+  const { setIsLoading } = useChatContext();
+  const handleClick = () => {
+    cancelRequest();
+    setIsLoading(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn(
+        "shrink-0 w-10 h-10 rounded-full ",
+        "bg-gray-100  hover:bg-gray-200  transition-colors",
+        "flex items-center justify-center",
+        "cursor-pointer"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-black w-4 h-4" })
+    }
+  );
+};
 var InputBar = (_a) => {
   var _b = _a, {
-    isLoading,
+    userMessages,
     onSend,
+    isLoading,
     onImageClick,
     onMagicClick,
     placeholder = "\u0E16\u0E32\u0E21\u0E04\u0E33\u0E16\u0E32\u0E21\u0E44\u0E14\u0E49\u0E40\u0E25\u0E22...",
     className
   } = _b, props = __objRest(_b, [
-    "isLoading",
+    "userMessages",
     "onSend",
+    "isLoading",
     "onImageClick",
     "onMagicClick",
     "placeholder",
     "className"
   ]);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const message = formData.get("message");
-    if ((message == null ? void 0 : message.trim()) && onSend) {
-      onSend(message);
-      e.currentTarget.reset();
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("section", __spreadProps(__spreadValues({ className: cn("bg-white p-4", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const { value, textareaRef, handleChange, handleSubmit, handleKeyDown } = useKeyboard({ userMessages, isLoading, onSend });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("section", __spreadProps(__spreadValues({ className: cn("bg-white p-4", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-end gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "label",
       {
         htmlFor: "chat-input-text",
-        className: "flex items-center rounded-full bg-gray-100 flex-1 p-2 focus-within:ring-2 focus-within:ring-orange-300",
+        className: "flex items-end rounded-3xl bg-gray-100 flex-1 p-2 focus-within:ring-2 focus-within:ring-orange-300",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonSelectImage, { onClick: onImageClick, className: "mr-3" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputText, { id: "chat-input-text", placeholder, onMagicClick })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonSelectImage, { onClick: onImageClick, className: "mr-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            InputTextArea,
+            {
+              ref: textareaRef,
+              id: "chat-input-text",
+              placeholder,
+              onMagicClick,
+              value,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown
+            }
+          )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonConfirm, { disabled: isLoading })
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonCancel, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonConfirm, { disabled: isLoading })
   ] }) }));
 };
 InputBar.ButtonSelectImage = ButtonSelectImage;
-InputBar.InputText = InputText;
+InputBar.InputTextArea = InputTextArea;
 InputBar.ButtonConfirm = ButtonConfirm;
 
 // src/components/loading.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Loading = ({ message }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: cn("flex flex-col justify-center items-center border border-orange-400 shadow shadow-orange-400 h-10 max-w-69.5 rounded-3xl", { "h-16": !!message }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-center items-center gap-x-1  ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-300" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-600" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-900" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: cn("flex flex-col justify-center items-center border border-orange-400 shadow shadow-orange-400 h-10 max-w-69.5 rounded-3xl", { "h-16": !!message }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-center items-center gap-x-1  ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-300" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-600" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-900" })
     ] }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-center text-[12px] text-gray-500 mt-1", children: message })
+    message && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-center text-[12px] text-gray-500 mt-1", children: message })
   ] });
 };
 
 // src/components/button.tsx
-var import_react3 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ButtonInner = (props, ref) => {
   const _a = props, { children, className, onClick } = _a, rest = __objRest(_a, ["children", "className", "onClick"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "button",
     __spreadProps(__spreadValues({
       ref,
@@ -1040,37 +1468,37 @@ var ButtonInner = (props, ref) => {
     })
   );
 };
-var Button = (0, import_react3.memo)((0, import_react3.forwardRef)(ButtonInner));
+var Button = (0, import_react8.memo)((0, import_react8.forwardRef)(ButtonInner));
 Button.displayName = "Button";
 
 // src/components/container.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Container = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("p-3 rounded-3xl border border-orange-300", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("p-3 rounded-3xl border border-orange-300", className), children });
 };
 
 // src/components/product-preview-card/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ProductPreviewCard = ({ product, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("bg-white overflow-hidden rounded-2xl p-3 lg:hover:shadow", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProductThumbnail, __spreadValues({}, product)),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProductSuggest, __spreadValues({}, product)),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProductTitle, __spreadValues({}, product)),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProductDescription, __spreadValues({}, product)),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProductPrice, __spreadValues({}, product)),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProductBadges, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProductMenus, __spreadValues({}, product))
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("bg-white overflow-hidden rounded-2xl h-full p-3 lg:hover:shadow", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductThumbnail, __spreadValues({}, product)),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductSuggest, __spreadValues({}, product)),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductTitle, __spreadValues({}, product)),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductDescription, __spreadValues({}, product)),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductPrice, __spreadValues({}, product)),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductBadges, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductMenus, __spreadValues({}, product))
   ] });
 };
 var ProductThumbnail = (product) => {
   if (!product.thumbnail) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "border aspect-square flex justify-center items-center", children: "No Image" });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "border aspect-square flex justify-center items-center", children: "No Image" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: product.thumbnail, alt: product.title, className: "w-full" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full aspect-square  flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: product.thumbnail, alt: product.title, className: "w-full" }) });
 };
 var ProductSuggest = (product) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: "text-[10px] text-[#FF6B00] font-bold bg-[#FFF0D3] max-w-max rounded-sm px-2\n      py-px mb-2",
@@ -1082,16 +1510,16 @@ var ProductSuggest = (product) => {
   );
 };
 var ProductTitle = (product) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
-      className: "font-semibold line-clamp-2 mb-2",
+      className: "font-semibold line-clamp-2 mb-2 min-h-12",
       children: product.title
     }
   );
 };
 var ProductDescription = (product) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: "text-sm text-[#525252] line-clamp-2 mb-3",
@@ -1100,7 +1528,7 @@ var ProductDescription = (product) => {
   );
 };
 var ProductPrice = (product) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: "text-lg text-red-500 font-semibold mb-3",
@@ -1117,7 +1545,7 @@ var ProductBadges = () => {
     { id: "badge2", text: "\u0E2A\u0E48\u0E07\u0E1F\u0E23\u0E35" },
     { id: "badge3", text: "Cashback 500" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex flex-wrap gap-1 mb-6", children: badges == null ? void 0 : badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "text-[10px] text-[#656565] font-bold bg-gray-200 px-2 py-px rounded-sm", children: badge.text }, badge.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "flex flex-wrap gap-1 mb-6", children: badges == null ? void 0 : badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: "text-[10px] text-[#656565] font-bold bg-gray-200 px-2 py-px rounded-sm", children: badge.text }, badge.id)) });
 };
 var ProductMenus = (product) => {
   const menus = [
@@ -1125,79 +1553,133 @@ var ProductMenus = (product) => {
     { id: "product-menu2", text: "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E25\u0E07\u0E43\u0E19\u0E23\u0E16\u0E40\u0E02\u0E47\u0E19 \u{1F6D2} " },
     { id: "product-menu3", text: "\u0E2A\u0E2D\u0E1A\u0E16\u0E32\u0E21\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21 \u{1F4AC}" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex flex-col gap-y-3", children: menus == null ? void 0 : menus.map((menu) => {
-    if (menu.text.includes("\u0E2A\u0E2D\u0E1A\u0E16\u0E32\u0E21\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21")) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href: `/products/${product.handle}`, target: "_blank", rel: "noreferrer", className: "border border-orange-300 rounded-3xl px-3 py-2 text-orange-500 text-sm text-center block", children: menu.text }) }, menu.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "flex flex-col gap-y-3", children: menus == null ? void 0 : menus.map((menu) => {
+    if (menu.text.includes("\u0E09\u0E31\u0E19\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E0B\u0E37\u0E49\u0E2D\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32")) {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { href: `/products/${product.handle}`, target: "_blank", rel: "noreferrer", className: "border border-orange-300 rounded-3xl px-3 py-2 text-orange-500 text-sm text-center block", children: menu.text }) }, menu.id);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { className: cn("text-nowrap w-full", { "bg-orange-500 text-white/80": menu.text.includes("\u0E09\u0E31\u0E19\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E0B\u0E37\u0E49\u0E2D\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32") }), children: menu.text }) }, menu.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { className: cn("text-nowrap w-full", { "bg-orange-500 text-white/80": menu.text.includes("\u0E09\u0E31\u0E19\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E0B\u0E37\u0E49\u0E2D\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32") }), children: menu.text }) }, menu.id);
   }) });
 };
 
 // src/components/message/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var MessageBubble = ({ message, handleClick }) => {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var MessageBubble = ({ message, handleClick, focus }) => {
   if (message.type === "USER_TEXT" /* USER_TEXT */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container, { className: "ml-auto bg-orange-200 border-none text-sm", children: message.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageText, { message: message.text, role: "user" /* USER */ });
   }
   if (message.type === "BOT_TEXT" /* BOT_TEXT */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BotMessageWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container, { className: "mr-auto max-w-75.5 text-sm bg-white", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BotMessageWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageText, { message: message.text, role: "bot" /* BOT */, focus }) });
   }
   if (message.type === "BOT_TEXT_WITH_MENUS" /* BOT_TEXT_WITH_MENUS */ || message.type === "BOT_QUICK_MENUS" /* BOT_QUICK_MENUS */ || message.type === "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */ || message.type === "BOT_TEXT_WITH_MENUS_COL" /* BOT_TEXT_WITH_MENUS_COL */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BotMessageWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageWithMenus, { type: message.type, message: message.text || "", menus: message.menus || [], handleClick }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BotMessageWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      MessageWithMenus,
+      {
+        type: message.type,
+        message: message.text || "",
+        menus: message.menus || [],
+        handleClick,
+        focus
+      }
+    ) });
   }
   if (message.type === "BOT_TEXT_WITH_PRODUCTS" /* BOT_TEXT_WITH_PRODUCTS */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BotMessageWrapper, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageWithProducts, { type: message.type, message: message.text || "", products: message.products || [], handleClick }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BotMessageWrapper, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      MessageWithProducts,
+      {
+        type: message.type,
+        message: message.text || "",
+        products: message.products || [],
+        handleClick,
+        focus
+      }
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenusImage, { menus: message.menus || [] });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BotMessageWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageText, { message: message.text, role: "bot" /* BOT */, focus }) });
 };
-var MessageWithMenus = ({ type, message, menus, className, handleClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Container, { className: cn("mr-auto max-w-75.5 lg:max-w-80 bg-white", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm mb-4", children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: cn("flex flex-wrap gap-x-1 gap-y-3", { "flex-col": type === "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */ }), children: menus == null ? void 0 : menus.map((menu) => {
-      if (menu == null ? void 0 : menu.phoneNumber) {
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: "w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "a",
-          {
-            href: `tel:+${menu == null ? void 0 : menu.phoneNumber}`,
-            className: "border border-orange-300 rounded-3xl px-4 py-2 text-orange-500 text-sm text-center block",
-            children: menu.title
-          }
-        ) }, menu.id);
-      }
-      if (menu == null ? void 0 : menu.url) {
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: "w-full min-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { href: menu.url, target: "_blank", rel: "noreferrer", className: "border border-orange-300 rounded-3xl px-4 py-2 text-orange-500 text-sm text-center block", children: menu.title }) }, menu.id);
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: cn("min-w-max ", { "min-w-full": type === "BOT_TEXT_WITH_MENUS_COL" /* BOT_TEXT_WITH_MENUS_COL */ }), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        Button,
+var MessageText = ({ role, message, focus, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    Container,
+    {
+      className: cn(
+        "max-w-2/3 text-sm wrap-break-word",
         {
-          className: cn({ "w-full": type === "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */ || type === "BOT_TEXT_WITH_MENUS_COL" /* BOT_TEXT_WITH_MENUS_COL */ }),
-          onClick: () => {
-            handleClick(menu);
-          },
-          children: menu.title
-        }
-      ) }, menu.id);
-    }) })
-  ] });
+          "ml-auto border-none bg-orange-200": role === "user" /* USER */,
+          "mr-auto border-none bg-white": role === "bot" /* BOT */ && !focus,
+          "border border-orange-400 shadow-orange-blur-16": role === "bot" /* BOT */ && focus
+        },
+        className
+      ),
+      children: message
+    }
+  );
+};
+var MessageWithMenus = ({ type, message, menus, className, handleClick, focus }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    Container,
+    {
+      className: cn(
+        "mr-auto max-w-80 text-sm bg-white",
+        {
+          "border-orange-400 shadow-orange-blur-16": focus,
+          "border-none": !focus
+        },
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm mb-4", children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: cn("flex flex-wrap gap-x-1 gap-y-3", { "flex-col": type === "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */ }), children: menus == null ? void 0 : menus.map((menu) => {
+          if (menu == null ? void 0 : menu.phoneNumber) {
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { className: "w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "a",
+              {
+                href: `tel:+${menu == null ? void 0 : menu.phoneNumber}`,
+                className: "border border-orange-300 rounded-3xl px-4 py-2 text-orange-500 text-sm text-center block",
+                children: menu.title
+              }
+            ) }, menu.id);
+          }
+          if (menu == null ? void 0 : menu.url) {
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { className: "w-full min-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: menu.url, target: "_blank", rel: "noreferrer", className: "border border-orange-300 rounded-3xl px-4 py-2 text-orange-500 text-sm text-center block", children: menu.title }) }, menu.id);
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { className: cn("min-w-max ", { "min-w-full": type === "BOT_TEXT_WITH_MENUS_COL" /* BOT_TEXT_WITH_MENUS_COL */ }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Button,
+            {
+              className: cn({ "w-full": type === "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */ || type === "BOT_TEXT_WITH_MENUS_COL" /* BOT_TEXT_WITH_MENUS_COL */ }),
+              onClick: () => {
+                handleClick(menu);
+              },
+              children: menu.title
+            }
+          ) }, menu.id);
+        }) })
+      ]
+    }
+  );
 };
-var MessageWithProducts = ({ message, className, products, handleClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container, { className: "text-sm mb-4 mr-auto max-w-75.5 lg:max-w-80 bg-white", children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var MessageWithProducts = ({ message, className, products, focus, handleClick }) => {
+  const { chatControls } = useChatContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("w-full", className), children: [
+    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageText, { message, role: "bot" /* BOT */, className: "mb-4", focus }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "ul",
       {
         className: "flex gap-3 lg:gap-x-2 overflow-x-auto scrollbar-hide -mx-4 snap-x snap-mandatory",
-        children: products == null ? void 0 : products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        children: products == null ? void 0 : products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "li",
           {
             className: cn(
               "mb-4 snap-start shrink-0 ",
-              "w-[calc(100%/2)] max-w-[calc(100%/2)]",
+              "w-[calc(100%/1.3)] max-w-[calc(100%/1.3)]",
+              "mobile-360:w-[calc(100%/1.7)] mobile-360:max-w-[calc(100%/1.7)] ",
+              "mobile-430:w-[calc(100%/2.2)] mobile-430:max-w-[calc(100%/2.2)] ",
+              "sm:w-[calc(100%/2.5)] sm:max-w-[calc(100%/2.5)]",
+              "md:w-[calc(100%/3)] md:max-w-[calc(100%/3)]",
               {
-                "mobile-360:w-[calc(100%/1.7)] mobile-360:max-w-[calc(100%/1.7)] mobile-430:w-[calc(100%/2.2)] mobile-430:max-w-[calc(100%/2.2)] sm:w-[calc(100%/2.5)] sm:max-w-[calc(100%/2.5)] md:w-[calc(100%/3)] md:max-w-[calc(100%/3)] lg:w-[calc(100%/2.2)] lg:max-w-[calc(100%/2.2)]": products.length > 2
+                "lg:w-[calc(100%/2.2)] lg:max-w-[calc(100%/2.2)]": !chatControls.isExpanded,
+                "lg:w-[calc(100%/4.6)] lg:max-w-[calc(100%/4.6)]": chatControls.isExpanded
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProductPreviewCard, { product })
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ProductPreviewCard, { product })
           },
           product.product_id
         ))
@@ -1205,22 +1687,19 @@ var MessageWithProducts = ({ message, className, products, handleClick }) => {
     ) })
   ] });
 };
-var MenusImage = ({ menus }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "flex gap-x-2", children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: menu == null ? void 0 : menu.imageUrl, alt: "menu-image" }) }, menu.id)) });
-};
-var BotMessageWrapper = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex flex-col items-start", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconAI, { className: "mb-2" }),
+var BotMessageWrapper = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex flex-col items-start w-full", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconAI, { className: "mb-2" }),
   children
 ] });
 
 // src/components/quick-menus.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var QuickMenus = ({ bannerSrc, message = "welcome message", menus, handleClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "w-75.5 bg-white shadow  rounded-3xl overflow-hidden", children: [
-    bannerSrc ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("img", { src: bannerSrc, alt: "banner" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-75.5 h-29.5 border-b border-gray-200" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-3 flex flex-col gap-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm ", children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "flex gap-3 flex-wrap", children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { className: "w-75.5 bg-white shadow  rounded-3xl overflow-hidden", children: [
+    bannerSrc ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: bannerSrc, alt: "banner" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-75.5 h-29.5 border-b border-gray-200" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-3 flex flex-col gap-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm ", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "flex gap-3 flex-wrap", children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { onClick: () => {
         handleClick(menu);
       }, children: menu.title }) }, menu.id)) })
     ] })
@@ -1228,11 +1707,19 @@ var QuickMenus = ({ bannerSrc, message = "welcome message", menus, handleClick }
 };
 
 // src/components/quick-menus-chip.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var QuickMenuChips = ({ menus, handleClick, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute lg:hidden right-0 top-0 bottom-0 w-8 bg-linear-to-l from-white to-transparent pointer-events-none z-10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: cn("flex lg:flex-wrap gap-3 overflow-x-scroll scrollbar-hide pr-10", className), children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const { chatControls } = useChatContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute lg:hidden right-0 top-0 bottom-0 w-8 bg-linear-to-l from-white to-transparent pointer-events-none z-10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: cn(
+      "flex  gap-3 overflow-x-scroll scrollbar-hide pr-10",
+      {
+        "lg:flex-wrap lg:max-h-28": !chatControls.isExpanded,
+        "h-14": chatControls.isExpanded
+      },
+      className
+    ), children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Button,
       {
         onClick: () => {
@@ -1247,20 +1734,21 @@ var QuickMenuChips = ({ menus, handleClick, className }) => {
 var quick_menus_chip_default = QuickMenuChips;
 
 // src/components/aizu-chat.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var AizuChat = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FloatingButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ChatWindow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatHeader, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatBody, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatFooter, {})
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var LOADING_TIMEOUT = 15e3;
+var AizuChat = ({ aizuClient }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AizuClientProvider, { client: aizuClient, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FloatingButton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ChatWindow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatHeader, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatBody, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatFooter, {})
     ] })
-  ] }) });
+  ] }) }) });
 };
 var FloatingButton = () => {
   const { chatControls } = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       type: "button",
@@ -1272,111 +1760,113 @@ var FloatingButton = () => {
         }
       ),
       "aria-label": "Toggle chat",
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconAI, { className: "w-full h-full" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconAI, { className: "w-full h-full" })
     }
   );
 };
 var ChatWindow = ({ children }) => {
   const { chatControls } = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    chatControls.isExpanded && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    chatControls.isExpanded && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         className: "fixed inset-0 bg-black/50  z-9998 transition-opacity duration-300",
         onClick: chatControls.toggleExpand,
         onKeyDown: void 0,
-        "aria-hidden": "true",
-        "aria-label": "Close expanded chat"
+        "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn(
-      "w-full lg:w-115 h-full  lg:h-[calc(100vh-100px)] lg:max-h-201",
-      "z-9999 fixed top-0 right-0 lg:right-5 lg:bottom-25 lg:top-auto bg-[#F8F8FA]",
-      "lg:rounded-4xl shadow-orange-blur overflow-hidden",
-      "flex flex-col",
-      "transition-all duration-300 ease-in-out",
-      {
-        "opacity-0 pointer-events-none translate-y-4": !chatControls.isOpen,
-        "opacity-100 pointer-events-auto translate-y-0": chatControls.isOpen
-      },
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
       {
-        "lg:right-1/2 lg:translate-x-1/2 lg:w-[calc(100vw-100px)] lg:max-w-289 ": chatControls.isExpanded
+        className: cn(
+          "w-full lg:w-115 h-full  lg:h-[calc(100vh-100px)] lg:max-h-201",
+          "z-9999 fixed top-0 right-0 lg:right-5 lg:bottom-25 lg:top-auto bg-[#F8F8FA]",
+          "lg:rounded-4xl shadow-orange-blur overflow-hidden",
+          "flex flex-col",
+          "transition-all duration-300 ease-in-out",
+          {
+            "opacity-0 pointer-events-none translate-y-4": !chatControls.isOpen,
+            "opacity-100 pointer-events-auto translate-y-0": chatControls.isOpen
+          },
+          {
+            "lg:right-1/2 lg:translate-x-1/2 lg:w-[calc(100vw-100px)] lg:max-w-289 ": chatControls.isExpanded
+          }
+        ),
+        children
       }
-    ), children })
+    )
   ] });
 };
 var ChatHeader = () => {
   const { chatControls } = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "flex justify-between items-center bg-white py-3 px-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: "flex justify-between items-center bg-white py-3 px-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "button",
       {
         type: "button",
         onClick: chatControls.closeChat,
         className: "text-sm text-left cursor-pointer  flex flex-1 lg:invisible",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconChevronLeft, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A" })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconChevronLeft, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col items-center flex-1 ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-nowrap", children: "ZIMCRAFT STORE" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[10px] text-[#7C7C7C]", children: "Powered by Zimpligital" })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-center flex-1 ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-nowrap", children: "ZIMCRAFT STORE" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[10px] text-[#7C7C7C]", children: "Powered by Zimpligital" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 flex items-center justify-end gap-2 invisible lg:visible", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 flex items-center justify-end gap-2 invisible lg:visible", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           "aria-label": "Expand chat",
           onClick: chatControls.toggleExpand,
           className: "text-sm p-2.5  cursor-pointer",
-          children: chatControls.isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconMinimize, { className: "hover:text-orange-500" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconExpand, { className: "hover:text-orange-500" })
+          children: chatControls.isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconMinimize, { className: "hover:text-orange-500" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconExpand, { className: "hover:text-orange-500" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
           "aria-label": "Close chat",
           onClick: chatControls.closeChat,
           className: "text-sm p-2.5 cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconXClose, { className: "hover:text-orange-500" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconXClose, { className: "hover:text-orange-500" })
         }
       )
     ] })
   ] });
 };
 var ChatBody = () => {
-  const { isLoading, addUserMessage, addBotMessage, messages, latestMessage } = useChatContext();
-  const [showWaitMessage, setShowWaitMessage] = (0, import_react4.useState)(false);
-  const messagesEndRef = (0, import_react4.useRef)(null);
-  const loadingMessage = showWaitMessage ? "\u0E23\u0E2D\u0E2A\u0E31\u0E01\u0E04\u0E23\u0E39\u0E48\u0E19\u0E30\u0E04\u0E23\u0E31\u0E1A... \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2B\u0E32\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E21\u0E32\u0E43\u0E2B\u0E49!" : void 0;
+  const { isLoading, setIsLoading, addUserMessage, addBotMessage, messages, latestMessage } = useChatContext();
+  const { sendMessage } = useAizuClient();
+  const { handleClickMenu } = useSendChat({
+    addBotMessage,
+    addUserMessage,
+    sendMessage,
+    latestMessage,
+    isLoading,
+    setIsLoading
+  });
+  const [showWaitMessage, setShowWaitMessage] = (0, import_react9.useState)(false);
+  const messagesEndRef = (0, import_react9.useRef)(null);
+  const loadingMessage = showWaitMessage ? "\u0E23\u0E2D\u0E2A\u0E31\u0E01\u0E04\u0E23\u0E39\u0E48\u0E19\u0E30\u0E04\u0E23\u0E31\u0E1A... \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2B\u0E32\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E21\u0E32\u0E43\u0E2B\u0E49" : void 0;
   const messagesDisplay = messages || [];
   const displayWelcomeMessage = messagesDisplay.length === 0 && !isLoading;
-  const handleClick = (0, import_react4.useCallback)((menu) => __async(null, null, function* () {
-    if (menu.title.includes(tryAgain) && !!(latestMessage == null ? void 0 : latestMessage.text)) {
-      addUserMessage(latestMessage == null ? void 0 : latestMessage.text);
-      if (latestMessage == null ? void 0 : latestMessage.text) {
-        return addBotMessage(getMockBotMessageByText(latestMessage == null ? void 0 : latestMessage.text));
-      }
-    } else {
-      addUserMessage(menu.title);
-    }
-    const mockResponse2 = getMockBotMessage(menu);
-    addBotMessage(mockResponse2);
-  }), [addUserMessage, addBotMessage, latestMessage]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     var _a;
     (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [isLoading, messagesDisplay.length]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     let timer;
     if (isLoading) {
       timer = setTimeout(() => {
         setShowWaitMessage(true);
-      }, 2e3);
+      }, LOADING_TIMEOUT);
     } else {
       setShowWaitMessage(false);
     }
@@ -1384,49 +1874,60 @@ var ChatBody = () => {
       if (timer) clearTimeout(timer);
     };
   }, [isLoading]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: "flex-1 overflow-y-auto relative scrollbar-hide", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: " p-4 flex flex-col gap-y-3 overflow-y-auto min-h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconAI, { className: "mb-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuickMenus, { bannerSrc: defaultBanner, menus: defaultQuickMenus, message: defaultQuickMenuMessage, handleClick })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("section", { className: "flex-1 overflow-y-auto relative scrollbar-hide", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: " p-4 flex flex-col gap-y-3 overflow-y-auto min-h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconAI, { className: "mb-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        QuickMenus,
+        {
+          bannerSrc: defaultBanner,
+          menus: defaultQuickMenus,
+          message: defaultQuickMenuMessage,
+          handleClick: handleClickMenu
+        }
+      )
     ] }),
-    messagesDisplay == null ? void 0 : messagesDisplay.map((message) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-full flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MessageBubble, { message, handleClick }) }, message.id);
+    messagesDisplay == null ? void 0 : messagesDisplay.map((message, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageBubble, { message, handleClick: handleClickMenu, focus: messagesDisplay.length - 1 === index }) }, message.id);
     }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconAI, { className: "mb-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Loading, { message: loadingMessage })
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconAI, { className: "mb-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loading, { message: loadingMessage })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: messagesEndRef }),
-    displayWelcomeMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mt-auto text-center text-sm text-gray-500", children: "\u0E04\u0E38\u0E13\u0E01\u0E33\u0E25\u0E31\u0E07\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19\u0E2A\u0E19\u0E17\u0E19\u0E32\u0E01\u0E31\u0E1A ZIMCRAFT AI" })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: messagesEndRef }),
+    displayWelcomeMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-auto text-center text-sm text-gray-500", children: "\u0E04\u0E38\u0E13\u0E01\u0E33\u0E25\u0E31\u0E07\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19\u0E2A\u0E19\u0E17\u0E19\u0E32\u0E01\u0E31\u0E1A ZIMCRAFT AI" })
   ] }) });
 };
 var ChatFooter = () => {
-  const { addUserMessage, addBotMessage, latestMessage, isLoading } = useChatContext();
-  const handleClick = (0, import_react4.useCallback)((menu) => __async(null, null, function* () {
-    if (menu.title.includes(tryAgain) && !!(latestMessage == null ? void 0 : latestMessage.text)) {
-      addUserMessage(latestMessage == null ? void 0 : latestMessage.text);
-      if (latestMessage == null ? void 0 : latestMessage.text) {
-        return addBotMessage(getMockBotMessageByText(latestMessage == null ? void 0 : latestMessage.text));
+  const { addUserMessage, addBotMessage, userMessages, latestMessage, isLoading, setIsLoading, chatControls } = useChatContext();
+  const { sendMessage } = useAizuClient();
+  const { handleSendMessage, handleClickMenu } = useSendChat({
+    addBotMessage,
+    addUserMessage,
+    sendMessage,
+    latestMessage,
+    isLoading,
+    setIsLoading
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: cn(
+    "bg-white min:h-42.5 lg:h-auto",
+    { "lg:h-auto": chatControls.isExpanded }
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      quick_menus_chip_default,
+      {
+        handleClick: handleClickMenu,
+        menus: defaultQuickMenuChips,
+        className: "pl-4 pt-4 pb-2"
       }
-    } else {
-      addUserMessage(menu.title);
-    }
-    const mockResponse2 = getMockBotMessage(menu);
-    addBotMessage(mockResponse2);
-  }), [addUserMessage, addBotMessage, latestMessage]);
-  const handleSend = (0, import_react4.useCallback)((message) => {
-    addUserMessage(message);
-    const mockResponse2 = getMockBotMessageByText(message);
-    addBotMessage(mockResponse2);
-  }, [addUserMessage, addBotMessage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "bg-white h-42.5 lg:h-46", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(quick_menus_chip_default, { handleClick, menus: defaultQuickMenuChips, className: "pl-4 pt-4 pb-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       InputBar,
       {
         placeholder: "\u0E16\u0E32\u0E21\u0E04\u0E33\u0E16\u0E32\u0E21\u0E44\u0E14\u0E49\u0E40\u0E25\u0E22...",
+        userMessages,
         isLoading,
-        onSend: handleSend,
+        onSend: handleSendMessage,
         onImageClick: () => console.log("Image upload"),
         onMagicClick: () => console.log("AI assist")
       }
@@ -1434,10 +1935,125 @@ var ChatFooter = () => {
   ] });
 };
 
+// src/components/test-component.tsx
+var import_react10 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var TestComponent = ({ client }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AizuClientProvider, { client, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TestComponentContent, {}) });
+};
+var TestComponentContent = () => {
+  const {
+    sendMessage,
+    resourceId,
+    threadId,
+    clearConversation,
+    cancelRequest
+  } = useAizuClient();
+  const [query, setQuery] = (0, import_react10.useState)("");
+  const [response, setResponse] = (0, import_react10.useState)("");
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const handleSend = () => __async(null, null, function* () {
+    if (!query.trim()) return;
+    setLoading(true);
+    setResponse("");
+    console.log("\u{1F4E4} Sending query:", query);
+    const result = yield sendMessage(query);
+    if (result.success) {
+      console.log("\u2705 Got response:", result.data);
+      setResponse(result.data.response);
+      setQuery("");
+    } else {
+      console.error("\u274C Error:", result.message);
+      setResponse(`\u274C Error: ${result.message}`);
+    }
+    setLoading(false);
+  });
+  const handleClear = () => {
+    if (confirm("Start new conversation? This will clear your chat history.")) {
+      clearConversation();
+      setResponse("");
+      setQuery("");
+      console.log("\u{1F504} Conversation cleared!");
+    }
+  };
+  const handleCancel = () => {
+    cancelRequest();
+    setLoading(false);
+    setResponse("\u26A0\uFE0F Request cancelled by user");
+    console.log("\u{1F6D1} Request cancelled");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "border-2 border-blue-500 p-4 rounded space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "font-bold text-xl", children: "Test API Call" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "text-sm bg-gray-200 px-3 py-1 rounded hover:bg-gray-300 disabled:opacity-50",
+          disabled: loading,
+          children: "\u{1F504} New Chat"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-sm space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: threadId ? "text-green-600" : "text-gray-400", children: [
+        "\u{1F517} Thread ID: ",
+        threadId || "(waiting for first message)"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: resourceId ? "text-green-600" : "text-gray-400", children: [
+        "\u{1F4E6} Resource ID: ",
+        resourceId || "(waiting for first message)"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && !loading && handleSend(),
+          placeholder: "Type your question...",
+          className: "flex-1 border p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+          disabled: loading
+        }
+      ),
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleCancel,
+          className: "bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 min-w-[100px]",
+          children: "\u23F9 Cancel"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleSend,
+          disabled: !query.trim(),
+          className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed min-w-[100px]",
+          children: "\u{1F4E4} Send"
+        }
+      )
+    ] }),
+    response && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-3 bg-gray-100 rounded", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("strong", { className: "text-gray-700", children: "Response:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-1 whitespace-pre-wrap text-gray-900", children: response })
+    ] }),
+    !threadId && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-xs text-gray-500 border-t pt-2 mt-2", children: [
+      "\u{1F4A1} ",
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("strong", { children: "Tip:" }),
+      " Send your first message to start a conversation. The thread ID will be saved and persist across page refreshes."
+    ] })
+  ] });
+};
+
 // src/hooks/use-custom.ts
-var import_react5 = require("react");
+var import_react11 = require("react");
 var useCustom = () => {
-  const [count, setCount] = (0, import_react5.useState)(0);
+  const [count, setCount] = (0, import_react11.useState)(0);
   const increment = () => {
     setCount(count + 1);
   };
@@ -1446,8 +2062,12 @@ var useCustom = () => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AizuChat,
+  AizuClient,
   Button,
   Loading,
   QuickMenus,
+  TestComponent,
+  TypeResponse,
+  createAizuClient,
   useCustom
 });