npm - @aizu-chat/react - Versions diffs - 0.0.7 → 0.0.9 - Mend

@aizu-chat/react 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/dist/components.js CHANGED Viewed

@@ -73,8 +73,7 @@ __export(components_exports, {
   AizuChat: () => AizuChat,
   Button: () => Button,
   Loading: () => Loading,
-  QuickMenus: () => QuickMenus,
-  TestComponent: () => TestComponent
+  QuickMenus: () => QuickMenus
 });
 module.exports = __toCommonJS(components_exports);
@@ -101,10 +100,224 @@ 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-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-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-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\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-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --font-weight-bold: 700;\n    --radius-3xl: 1.5rem;\n    --radius-4xl: 2rem;\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-wiggle: wiggle 1s 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-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  .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-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-5 {\n    bottom: calc(var(--spacing) * 5);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mr-auto {\n    margin-right: auto;\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .h-0\\.75 {\n    height: calc(var(--spacing) * 0.75);\n  }\n  .h-1\\.25 {\n    height: calc(var(--spacing) * 1.25);\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  .w-0\\.75 {\n    width: calc(var(--spacing) * 0.75);\n  }\n  .w-1\\.25 {\n    width: calc(var(--spacing) * 1.25);\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-75\\.5 {\n    width: calc(var(--spacing) * 75.5);\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  .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-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\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  .animate-wiggle {\n    animation: var(--animate-wiggle);\n  }\n  .cursor-pointer {\n    cursor: pointer;\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  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\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-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-3xl {\n    border-radius: var(--radius-3xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\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-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-\\[\\#F8F8FA\\] {\n    background-color: #F8F8FA;\n  }\n  .bg-black\\/60 {\n    background-color: color-mix(in srgb, #000 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 60%, 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-orange-200 {\n    background-color: var(--color-orange-200);\n  }\n  .bg-orange-400 {\n    background-color: var(--color-orange-400);\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-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\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  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\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-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-\\[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  .text-nowrap {\n    text-wrap: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\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-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-orange-500 {\n    color: var(--color-orange-500);\n  }\n  .text-white {\n    color: var(--color-white);\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-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\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  .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  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\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  .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-orange-300 {\n    &:focus {\n      --tw-ring-color: var(--color-orange-300);\n    }\n  }\n  .disabled\\:bg-gray-400 {\n    &:disabled {\n      background-color: var(--color-gray-400);\n    }\n  }\n  .lg\\:top-auto {\n    @media (width >= 64rem) {\n      top: auto;\n    }\n  }\n  .lg\\:right-5 {\n    @media (width >= 64rem) {\n      right: calc(var(--spacing) * 5);\n    }\n  }\n  .lg\\:bottom-20 {\n    @media (width >= 64rem) {\n      bottom: calc(var(--spacing) * 20);\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\\:max-h-201 {\n    @media (width >= 64rem) {\n      max-height: calc(var(--spacing) * 201);\n    }\n  }\n  .lg\\:w-107\\.5 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 107.5);\n    }\n  }\n  .lg\\:max-w-80 {\n    @media (width >= 64rem) {\n      max-width: calc(var(--spacing) * 80);\n    }\n  }\n  .lg\\:flex-wrap {\n    @media (width >= 64rem) {\n      flex-wrap: wrap;\n    }\n  }\n  .lg\\:rounded-4xl {\n    @media (width >= 64rem) {\n      border-radius: var(--radius-4xl);\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}\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-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@keyframes wiggle {\n  0%, 100% {\n    transform: translateY(-50%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 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-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    }\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-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    --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-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\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-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\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-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  .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  .animate-circle-keys {\n    animation: var(--animate-circle-keys);\n  }\n  .cursor-pointer {\n    cursor: pointer;\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-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-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-3xl {\n    border-radius: var(--radius-3xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\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-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-orange-200 {\n    background-color: var(--color-orange-200);\n  }\n  .bg-orange-400 {\n    background-color: var(--color-orange-400);\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-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  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\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-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  .text-nowrap {\n    text-wrap: nowrap;\n  }\n  .text-\\[\\#3D3D3D\\] {\n    color: #3D3D3D;\n  }\n  .text-\\[\\#7C7C7C\\] {\n    color: #7C7C7C;\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  .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-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  .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\\:opacity-70 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 70%;\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  .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-107\\.5 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 107.5);\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\\: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\\:rounded-4xl {\n    @media (width >= 64rem) {\n      border-radius: var(--radius-4xl);\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-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-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-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-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");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...args) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(args));
+}
+// src/assets/icons/ai/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconAI = (_a) => {
+  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: "64",
+      height: "64",
+      viewBox: "0 0 64 64",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("w-8 h-8", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Icon AI" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { filter: "url(#filter0_ii_48_32)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "32.0001", cy: "32", r: "32", fill: "url(#paint0_linear_48_32)" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M34.2288 17.7789C33.9922 16.7384 33.0671 16 32 16C30.9329 16 30.0078 16.7384 29.7712 17.7789L28.5065 23.3405C27.9216 25.9129 25.9129 27.9216 23.3405 28.5065L17.7789 29.7712C16.7384 30.0078 16 30.9329 16 32C16 33.0671 16.7384 33.9922 17.7789 34.2288L23.3405 35.4935C25.9129 36.0784 27.9216 38.0871 28.5065 40.6595L29.7712 46.2211C30.0078 47.2616 30.9329 48 32 48C33.0671 48 33.9922 47.2616 34.2288 46.2211L35.4935 40.6595C36.0784 38.0871 38.0871 36.0784 40.6595 35.4935L46.2211 34.2288C47.2616 33.9922 48 33.0671 48 32C48 30.9329 47.2616 30.0078 46.2211 29.7712L40.6595 28.5065C38.0871 27.9216 36.0784 25.9129 35.4935 23.3405L34.2288 17.7789Z", fill: "url(#paint1_linear_48_32)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("filter", { id: "filter0_ii_48_32", x: "0.00012207", y: "0", width: "63.9999", height: "64", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feMorphology", { radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_innerShadow_48_32" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { stdDeviation: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_48_32" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { stdDeviation: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feBlend", { mode: "normal", in2: "effect1_innerShadow_48_32", result: "effect2_innerShadow_48_32" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "paint0_linear_48_32", x1: "32.0001", y1: "-5.96047e-08", x2: "32.0001", y2: "64", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: "#3D3D3D" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0.496312" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0.723156", stopColor: "#803500" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0.95", stopColor: "#FF6A00" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "paint1_linear_48_32", x1: "32", y1: "16", x2: "32", y2: "48", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: "white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "1", stopColor: "#EBEBEB" })
+          ] })
+        ] })
+      ]
+    })
+  );
+};
+// src/assets/icons/arrow-narrow-up/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IconArrowNarrowUp = (_a) => {
+  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: "Arrow Narrow up" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M10 16.6666V3.33331M10 3.33331L5 8.33331M10 3.33331L15 8.33331",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+// src/assets/icons/chevron-left/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconChevronLeft = (_a) => {
+  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: "Chevron Left" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M12.5 15L7.5 10L12.5 5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+// src/assets/icons/expand/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var IconExpand = (_a) => {
+  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("text-[#3D3D3D]", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Icon Expand" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M11.6667 8.33333L17.5 2.5M17.5 2.5H12.5M17.5 2.5V7.5M8.33333 11.6667L2.5 17.5M2.5 17.5H7.5M2.5 17.5L2.5 12.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+// src/assets/icons/image-plus/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var IconImagePlus = (_a) => {
+  var _b = _a, { className = "text-[#FFF8EC]" } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: "Icon Image Plus" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M10.4167 2.50002H6.5C5.09987 2.50002 4.3998 2.50002 3.86502 2.7725C3.39462 3.01219 3.01217 3.39464 2.77248 3.86504C2.5 4.39982 2.5 5.09989 2.5 6.50002V13.5C2.5 14.9002 2.5 15.6002 2.77248 16.135C3.01217 16.6054 3.39462 16.9879 3.86502 17.2275C4.3998 17.5 5.09987 17.5 6.5 17.5H14.1667C14.9416 17.5 15.3291 17.5 15.647 17.4148C16.5098 17.1837 17.1836 16.5098 17.4148 15.6471C17.5 15.3292 17.5 14.9417 17.5 14.1667M15.8333 6.66669V1.66669M13.3333 4.16669H18.3333M8.75 7.08335C8.75 8.00383 8.00381 8.75002 7.08333 8.75002C6.16286 8.75002 5.41667 8.00383 5.41667 7.08335C5.41667 6.16288 6.16286 5.41669 7.08333 5.41669C8.00381 5.41669 8.75 6.16288 8.75 7.08335ZM12.4917 9.93181L5.44262 16.3401C5.04614 16.7005 4.84789 16.8807 4.83036 17.0368C4.81516 17.1722 4.86704 17.3064 4.96932 17.3963C5.08732 17.5 5.35523 17.5 5.89107 17.5H13.7133C14.9126 17.5 15.5123 17.5 15.9833 17.2985C16.5745 17.0456 17.0456 16.5746 17.2985 15.9833C17.5 15.5123 17.5 14.9126 17.5 13.7133C17.5 13.3098 17.5 13.108 17.4559 12.9201C17.4004 12.684 17.2941 12.4628 17.1444 12.272C17.0252 12.1202 16.8677 11.9941 16.5526 11.7421L14.2215 9.87724C13.9062 9.62494 13.7485 9.4988 13.5748 9.45428C13.4218 9.41504 13.2607 9.42012 13.1104 9.46893C12.94 9.5243 12.7905 9.66014 12.4917 9.93181Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+// src/assets/icons/x-close/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var IconXClose = (_a) => {
+  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("text-[#3D3D3D]", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("title", { children: "Icon XClose" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "path",
+          {
+            d: "M15 5L5 15M5 5L15 15",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
 // src/constant/default.ts
-var defaultQuickMenuMessage = "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35\u0E04\u0E23\u0E31\u0E1A Brooklyn! \u{1F44B} UTECH \u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E0A\u0E48\u0E27\u0E22\u0E04\u0E38\u0E13\u0E2B\u0E32\u0E2D\u0E38\u0E1B\u0E01\u0E23\u0E13\u0E4C IT \u0E17\u0E35\u0E48\u0E15\u0E2D\u0E1A\u0E42\u0E08\u0E17\u0E22\u0E4C\u0E17\u0E35\u0E48\u0E2A\u0E38\u0E14 \u0E44\u0E21\u0E48\u0E27\u0E48\u0E32\u0E08\u0E30\u0E40\u0E1B\u0E47\u0E19\u0E04\u0E2D\u0E21\u0E1E\u0E34\u0E27\u0E40\u0E15\u0E2D\u0E23\u0E4C \u0E2D\u0E38\u0E1B\u0E01\u0E23\u0E13\u0E4C\u0E40\u0E2A\u0E23\u0E34\u0E21 \u0E2B\u0E23\u0E37\u0E2D\u0E2D\u0E30\u0E44\u0E23\u0E01\u0E47\u0E15\u0E32\u0E21 \u0E16\u0E32\u0E21\u0E44\u0E14\u0E49\u0E40\u0E25\u0E22\u0E04\u0E23\u0E31\u0E1A \u{1F60A}";
+var defaultQuickMenuMessage = "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35\u0E04\u0E23\u0E31\u0E1A \u{1F44B} ZIMCRAFT \u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E0A\u0E48\u0E27\u0E22\u0E04\u0E38\u0E13\u0E2B\u0E32\u0E2D\u0E38\u0E1B\u0E01\u0E23\u0E13\u0E4C IT \u0E17\u0E35\u0E48\u0E15\u0E2D\u0E1A\u0E42\u0E08\u0E17\u0E22\u0E4C\u0E17\u0E35\u0E48\u0E2A\u0E38\u0E14 \u0E44\u0E21\u0E48\u0E27\u0E48\u0E32\u0E08\u0E30\u0E40\u0E1B\u0E47\u0E19\u0E04\u0E2D\u0E21\u0E1E\u0E34\u0E27\u0E40\u0E15\u0E2D\u0E23\u0E4C \u0E2D\u0E38\u0E1B\u0E01\u0E23\u0E13\u0E4C\u0E40\u0E2A\u0E23\u0E34\u0E21 \u0E2B\u0E23\u0E37\u0E2D\u0E2D\u0E30\u0E44\u0E23\u0E01\u0E47\u0E15\u0E32\u0E21 \u0E16\u0E32\u0E21\u0E44\u0E14\u0E49\u0E40\u0E25\u0E22\u0E04\u0E23\u0E31\u0E1A \u{1F60A}";
 var defaultBanner = "https://utech-dev.zimpligital.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcoupon-banner-th.edad52fd.webp&w=640&q=75";
 var defaultQuickMenus = [
   { id: "1", title: "\u0E2A\u0E31\u0E48\u0E07\u0E0B\u0E37\u0E49\u0E2D\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32 \u{1F6CD}\uFE0F", value: "\u0E2A\u0E31\u0E48\u0E07\u0E0B\u0E37\u0E49\u0E2D\u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32", mockResponse: "QUICK_MENU_SHOP" /* QUICK_MENU_SHOP */ },
@@ -239,7 +452,7 @@ var mockResponse = {
   ["PROMOTION_INFO" /* PROMOTION_INFO */]: {
     id: "bot-promotion-info",
     type: "BOT_TEXT" /* BOT_TEXT */,
-    text: "\u{1F389} \u0E42\u0E1B\u0E23\u0E42\u0E21\u0E0A\u0E31\u0E48\u0E19\u0E1E\u0E34\u0E40\u0E28\u0E29\u0E1B\u0E23\u0E30\u0E08\u0E33\u0E40\u0E14\u0E37\u0E2D\u0E19\n\n\u{1F525} \u0E25\u0E14\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 30% \u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32\u0E17\u0E38\u0E01\u0E2B\u0E21\u0E27\u0E14\n\u{1F525} \u0E0B\u0E37\u0E49\u0E2D\u0E04\u0E23\u0E1A 5,000 \u0E1A\u0E32\u0E17 \u0E23\u0E31\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14 500 \u0E1A\u0E32\u0E17\n\u{1F525} \u0E1C\u0E48\u0E2D\u0E19 0% \u0E19\u0E32\u0E19 10 \u0E40\u0E14\u0E37\u0E2D\u0E19\n\u{1F525} \u0E02\u0E2D\u0E07\u0E41\u0E16\u0E21\u0E21\u0E39\u0E25\u0E04\u0E48\u0E32\u0E2A\u0E39\u0E07 \u0E2A\u0E33\u0E2B\u0E23\u0E31\u0E1A\u0E25\u0E39\u0E01\u0E04\u0E49\u0E32\u0E43\u0E2B\u0E21\u0E48\n\n\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14: UTECH2024 \u0E23\u0E31\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E35\u0E01 5%!"
+    text: "\u{1F389} \u0E42\u0E1B\u0E23\u0E42\u0E21\u0E0A\u0E31\u0E48\u0E19\u0E1E\u0E34\u0E40\u0E28\u0E29\u0E1B\u0E23\u0E30\u0E08\u0E33\u0E40\u0E14\u0E37\u0E2D\u0E19\n\n\u{1F525} \u0E25\u0E14\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 30% \u0E2A\u0E34\u0E19\u0E04\u0E49\u0E32\u0E17\u0E38\u0E01\u0E2B\u0E21\u0E27\u0E14\n\u{1F525} \u0E0B\u0E37\u0E49\u0E2D\u0E04\u0E23\u0E1A 5,000 \u0E1A\u0E32\u0E17 \u0E23\u0E31\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14 500 \u0E1A\u0E32\u0E17\n\u{1F525} \u0E1C\u0E48\u0E2D\u0E19 0% \u0E19\u0E32\u0E19 10 \u0E40\u0E14\u0E37\u0E2D\u0E19\n\u{1F525} \u0E02\u0E2D\u0E07\u0E41\u0E16\u0E21\u0E21\u0E39\u0E25\u0E04\u0E48\u0E32\u0E2A\u0E39\u0E07 \u0E2A\u0E33\u0E2B\u0E23\u0E31\u0E1A\u0E25\u0E39\u0E01\u0E04\u0E49\u0E32\u0E43\u0E2B\u0E21\u0E48\n\n\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E49\u0E14: ZIMCRAFT 2024 \u0E23\u0E31\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E25\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E2D\u0E35\u0E01 5%!"
   },
   ["STOCK_AVAILABLE" /* STOCK_AVAILABLE */]: {
     id: "bot-stock-available",
@@ -276,21 +489,25 @@ var mockMessages = [
 // src/hooks/use-openchat.tsx
 var import_react = require("react");
 var useOpenChat = () => {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(true);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react.useState)(false);
   const openChat = (0, import_react.useCallback)(() => setIsOpen(true), []);
   const closeChat = (0, import_react.useCallback)(() => setIsOpen(false), []);
   const toggleChat = (0, import_react.useCallback)(() => setIsOpen((prev) => !prev), []);
+  const toggleExpand = (0, import_react.useCallback)(() => setIsExpanded((prev) => !prev), []);
   return {
     isOpen,
+    isExpanded,
     openChat,
     closeChat,
-    toggleChat
+    toggleChat,
+    toggleExpand
   };
 };
 // src/contexts/chat-context.tsx
 var import_react2 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ChatContext = (0, import_react2.createContext)(void 0);
 var ChatProvider = ({ children }) => {
   const [messages, setMessages] = (0, import_react2.useState)([]);
@@ -329,7 +546,7 @@ var ChatProvider = ({ children }) => {
     }),
     [messages, latestMessage, isLoading, chatControls, addUserMessage, addBotMessage, clearMessages]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatContext.Provider, { value, children });
 };
 var useChatContext = () => {
   const context = (0, import_react2.useContext)(ChatContext);
@@ -339,13 +556,6 @@ var useChatContext = () => {
   return context;
 };
-// src/utils/cn.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...args) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(args));
-}
 // src/utils/message.ts
 var getMockBotMessage = (menu) => {
   const newMessage = mockResponse[menu.mockResponse];
@@ -361,43 +571,38 @@ var getMockBotMessageByText = (text) => {
 };
 // src/components/aizu-chat.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 // src/components/input-bar/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ButtonSelectImage = (_a) => {
   var _b = _a, { onClick, className } = _b, props = __objRest(_b, ["onClick", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type: "button",
       onClick,
       className: cn(
-        "shrink-0 w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors",
+        "shrink-0 w-8 h-8 rounded-full bg-[#3D3D3D] flex items-center justify-center hover:opacity-70 cursor-pointer transition-colors",
         className
       ),
       "aria-label": "Upload image"
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: "Image Upload Icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "21 15 16 10 5 21" })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconImagePlus, {})
     })
   );
 };
 var InputText = (_a) => {
   var _b = _a, { onMagicClick, placeholder, className } = _b, props = __objRest(_b, ["onMagicClick", "placeholder", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       __spreadValues({
         type: "text",
         name: "message",
         placeholder,
         className: cn(
-          "w-full px-4 py-2 pr-12 rounded-full bg-gray-100 border-none outline-none focus:ring-2 focus:ring-orange-300 text-sm",
+          "w-full pr-12  bg-gray-100 outline-none ",
           className
         ),
         onKeyDown: (e) => {
@@ -409,49 +614,52 @@ var InputText = (_a) => {
         }
       }, props)
     ),
-    onMagicClick && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    onMagicClick && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: "Magic/AI Icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.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" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: "Magic/AI Icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.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" })
         ] })
       }
     )
   ] });
 };
 var ButtonConfirm = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  var _b = _a, { className, disabled } = _b, props = __objRest(_b, ["className", "disabled"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type: "submit",
       className: cn(
-        "shrink-0 w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors",
+        "shrink-0 w-10 h-10 rounded-full ",
+        "bg-gray-100  hover:bg-gray-200  transition-colors",
+        "flex items-center justify-center",
+        "cursor-pointer",
+        "disabled:bg-gray-300 disabled:cursor-not-allowed",
         className
       ),
-      "aria-label": "Send message"
+      "aria-label": "Send message",
+      disabled
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: "Send Icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "5 12 12 5 19 12" })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconArrowNarrowUp, { className: "text-black" })
     })
   );
 };
 var InputBar = (_a) => {
   var _b = _a, {
+    isLoading,
     onSend,
     onImageClick,
     onMagicClick,
     placeholder = "\u0E16\u0E32\u0E21\u0E04\u0E33\u0E16\u0E32\u0E21\u0E44\u0E14\u0E49\u0E40\u0E25\u0E22...",
     className
   } = _b, props = __objRest(_b, [
+    "isLoading",
     "onSend",
     "onImageClick",
     "onMagicClick",
@@ -467,10 +675,19 @@ var InputBar = (_a) => {
       e.currentTarget.reset();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", __spreadProps(__spreadValues({ className: cn("bg-white p-4", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonSelectImage, { onClick: onImageClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InputText, { placeholder, onMagicClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonConfirm, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("section", __spreadProps(__spreadValues({ className: cn("bg-white p-4", className) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.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",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonSelectImage, { onClick: onImageClick, className: "mr-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InputText, { id: "chat-input-text", placeholder, onMagicClick })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonConfirm, { disabled: isLoading })
   ] }) }));
 };
 InputBar.ButtonSelectImage = ButtonSelectImage;
@@ -478,23 +695,23 @@ InputBar.InputText = InputText;
 InputBar.ButtonConfirm = ButtonConfirm;
 // src/components/loading.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Loading = ({ message }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)("div", { className: "flex justify-center items-center gap-x-1  ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-wiggle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-1.25 h-1.25 rounded-full bg-orange-400 animate-wiggle" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-0.75 h-0.75 rounded-full bg-orange-400 animate-wiggle" })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsxs)("div", { className: "flex justify-center items-center gap-x-1  ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-300" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-600" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "w-2 h-2 rounded-full bg-orange-400 animate-circle-keys animation-delay-900" })
     ] }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-center text-[12px] text-gray-500 mt-1", children: message })
+    message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-center text-[12px] text-gray-500 mt-1", children: message })
   ] });
 };
 // src/components/button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, { children, className, onClick, ref } = _b, props = __objRest(_b, ["children", "className", "onClick", "ref"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     __spreadProps(__spreadValues({
       ref,
@@ -514,38 +731,32 @@ var Button = (_a) => {
 };
 // src/components/container.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Container = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("p-3 rounded-3xl border border-orange-300", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("p-3 rounded-3xl border border-orange-300", className), children });
 };
 // src/components/message/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MessageBubble = ({ message, handleClick }) => {
   if (message.type === "USER_TEXT" /* USER_TEXT */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { className: "ml-auto bg-orange-200 border-none text-sm", children: message.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Container, { className: "ml-auto bg-orange-200 border-none text-sm", children: message.text });
   }
   if (message.type === "BOT_TEXT" /* BOT_TEXT */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Container, { className: "mr-auto max-w-75.5 text-sm", children: message.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BotMessageWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Container, { className: "mr-auto max-w-75.5 text-sm", children: message.text }) });
   }
-  if (message.type === "BOT_TEXT_WITH_MENUS" /* BOT_TEXT_WITH_MENUS */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageWithMenus, { type: message.type, message: message.text || "", menus: message.menus || [], handleClick });
+  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 */) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BotMessageWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageWithMenus, { type: message.type, message: message.text || "", menus: message.menus || [], handleClick }) });
   }
-  if (message.type === "BOT_QUICK_MENUS" /* BOT_QUICK_MENUS */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageWithMenus, { type: message.type, message: message.text || "", menus: message.menus || [], handleClick });
-  }
-  if (message.type === "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageWithMenus, { type: message.type, message: message.text || "", menus: message.menus || [], handleClick });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenusImage, { menus: message.menus || [] });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MenusImage, { menus: message.menus || [] });
 };
 var MessageWithMenus = ({ type, message, menus, className, handleClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Container, { className: cn("mr-auto max-w-75.5 lg:max-w-80", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm mb-4", children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.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) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Container, { className: cn("mr-auto max-w-75.5 lg:max-w-80", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm mb-4", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime6.jsx)("li", { className: "w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "a",
           {
             href: `tel:+${menu == null ? void 0 : menu.phoneNumber}`,
@@ -554,7 +765,7 @@ var MessageWithMenus = ({ type, message, menus, className, handleClick }) => {
           }
         ) }, menu.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { className: "min-w-max ", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "min-w-max ", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Button,
         {
           className: cn({ "w-full": type === "BOT_ERROR_WITH_MENUS" /* BOT_ERROR_WITH_MENUS */ }),
@@ -568,17 +779,21 @@ var MessageWithMenus = ({ type, message, menus, className, handleClick }) => {
   ] });
 };
 var MenusImage = ({ menus }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "flex gap-x-2", children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: menu == null ? void 0 : menu.imageUrl, alt: "menu-image" }) }, menu.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "flex gap-x-2", children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: menu == null ? void 0 : menu.imageUrl, alt: "menu-image" }) }, menu.id)) });
 };
+var BotMessageWrapper = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-start", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconAI, { className: "mb-2" }),
+  children
+] });
 // src/components/quick-menus.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var QuickMenus = ({ bannerSrc, message = "welcome message", menus, handleClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "w-75.5 bg-white shadow  rounded-3xl overflow-hidden", children: [
-    bannerSrc ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: bannerSrc, alt: "banner" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-75.5 h-29.5 border-b border-gray-200" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "p-3 flex flex-col gap-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm", children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "flex gap-3 flex-wrap", children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "w-75.5 bg-white shadow  rounded-3xl overflow-hidden", children: [
+    bannerSrc ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: bannerSrc, alt: "banner" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-75.5 h-29.5 border-b border-gray-200" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "p-3 flex flex-col gap-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "flex gap-3 flex-wrap", children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: () => {
         handleClick(menu);
       }, children: menu.title }) }, menu.id)) })
     ] })
@@ -586,11 +801,11 @@ var QuickMenus = ({ bannerSrc, message = "welcome message", menus, handleClick }
 };
 // src/components/quick-menus-chip.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var QuickMenuChips = ({ menus, handleClick, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("ul", { className: cn("flex lg:flex-wrap gap-3 overflow-x-scroll scrollbar-hide", className), children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("ul", { className: cn("flex lg:flex-wrap gap-3 overflow-x-scroll scrollbar-hide", className), children: menus == null ? void 0 : menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Button,
       {
         onClick: () => {
@@ -604,137 +819,123 @@ var QuickMenuChips = ({ menus, handleClick, className }) => {
 };
 var quick_menus_chip_default = QuickMenuChips;
-// src/contexts/aizu-client-context.tsx
-var import_react3 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var AizuClientContext = (0, import_react3.createContext)(
-  void 0
-);
-var AizuClientProvider = ({
-  children,
-  client,
-  initialThreadId,
-  initialResourceId
-}) => {
-  const [threadId, setThreadId] = (0, import_react3.useState)(initialThreadId);
-  const [resourceId, setResourceId] = (0, import_react3.useState)(
-    initialResourceId
-  );
-  const sendMessage = (0, import_react3.useCallback)(
-    (query) => __async(null, null, function* () {
-      console.log("\u{1F4E4} Sending message:", query);
-      console.log("\u{1F517} Current threadId:", threadId);
-      console.log("\u{1F4E6} Current resourceId:", resourceId);
-      const params = __spreadValues(__spreadValues({
-        query
-      }, threadId && { thread_id: threadId }), resourceId && { resource_id: resourceId });
-      const response = yield client.chat(params);
-      console.log("\u{1F4E5} Response received:", {
-        thread_id: response.thread_id,
-        resource_id: response.resource_id
-      });
-      if (response.thread_id && response.thread_id !== threadId) {
-        console.log("\u2705 Update threadId:", response.thread_id);
-        setThreadId(response.thread_id);
-      }
-      if (response.resource_id && response.resource_id !== resourceId) {
-        console.log("\u2705 Update resourceId:", response.resource_id);
-        setResourceId(response.resource_id);
-      }
-      return response;
-    }),
-    [client, threadId, resourceId]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    AizuClientContext.Provider,
-    {
-      value: { aizuClient: client, threadId, resourceId, sendMessage },
-      children
-    }
-  );
-};
-var useAizuClient = () => {
-  const context = (0, import_react3.useContext)(AizuClientContext);
-  if (!context) {
-    throw new Error("useAizuClient must be used within AizuClientProvider");
-  }
-  return context;
-};
 // src/components/aizu-chat.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var AizuChat = ({ aizuClient }) => {
-  console.log("\u{1F680} ~ AizuChat ~ aizuClient:", aizuClient);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AizuClientProvider, { client: aizuClient, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ChatWindow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatHeader, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatBody, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatFooter, {})
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var AizuChat = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FloatingButton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ChatWindow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatHeader, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatBody, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatFooter, {})
     ] })
-  ] }) }) });
+  ] }) });
 };
 var FloatingButton = () => {
   const { chatControls } = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     {
       type: "button",
       onClick: chatControls.toggleChat,
-      className: "rounded-full p-2 aspect-square w-10  bg-black/60 cursor-pointer fixed right-5 bottom-5",
-      children: "AI"
+      className: "rounded-full aspect-square w-16 cursor-pointer fixed right-5 bottom-5 shadow-orange-blur",
+      "aria-label": "Toggle chat",
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconAI, { className: "w-full h-full" })
     }
   );
 };
 var ChatWindow = ({ children }) => {
   const { chatControls } = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      className: cn(
-        "w-full lg:w-107.5 h-full lg:max-h-201",
-        "z-9999 fixed top-0 right-0 lg:right-5 lg:bottom-20 lg:top-auto bg-[#F8F8FA]",
-        "lg:rounded-4xl shadow-2xl overflow-hidden",
-        "flex flex-col",
-        { invisible: !chatControls.isOpen }
-      ),
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    chatControls.isExpanded && /* @__PURE__ */ (0, import_jsx_runtime15.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"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(
+      "w-full lg:w-107.5 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 })
+  ] });
 };
 var ChatHeader = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: "flex justify-between items-center bg-white py-3 px-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", children: " Back" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Shop Logo" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px]", children: "Powered by Zimpligital" })
+  const { chatControls } = useChatContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "flex justify-between items-center bg-white py-3 px-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: chatControls.closeChat,
+        className: "text-sm text-left cursor-pointer  flex flex-1 lg:invisible",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconChevronLeft, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col items-center flex-1 ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-nowrap", children: "ZIMCRAFT STORE" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] text-[#7C7C7C]", children: "Powered by Zimpligital" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {})
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 flex items-center justify-end gap-2 invisible lg:visible", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Expand chat",
+          onClick: chatControls.toggleExpand,
+          className: "text-sm p-2.5  cursor-pointer",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconExpand, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close chat",
+          onClick: chatControls.closeChat,
+          className: "text-sm p-2.5 cursor-pointer",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconXClose, {})
+        }
+      )
+    ] })
   ] });
 };
 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 [showWaitMessage, setShowWaitMessage] = (0, import_react3.useState)(false);
+  const messagesEndRef = (0, import_react3.useRef)(null);
   const loadingMessage = showWaitMessage ? "Wait a minute..." : 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)) {
-        return addUserMessage(latestMessage == null ? void 0 : latestMessage.text);
-      }
-      addUserMessage(menu.title);
-      const mockResponse2 = getMockBotMessage(menu);
-      addBotMessage(mockResponse2);
-    }),
-    [addUserMessage, addBotMessage, latestMessage]
-  );
-  (0, import_react4.useEffect)(() => {
+  const handleClick = (0, import_react3.useCallback)((menu) => __async(null, null, function* () {
+    if (menu.title.includes(tryAgain) && !!(latestMessage == null ? void 0 : latestMessage.text)) {
+      return addUserMessage(latestMessage == null ? void 0 : latestMessage.text);
+    }
+    addUserMessage(menu.title);
+    const mockResponse2 = getMockBotMessage(menu);
+    addBotMessage(mockResponse2);
+  }), [addUserMessage, addBotMessage, latestMessage]);
+  (0, import_react3.useEffect)(() => {
     var _a;
     (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [isLoading, messagesDisplay.length]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     let timer;
     if (isLoading) {
       timer = setTimeout(() => {
@@ -747,63 +948,44 @@ var ChatBody = () => {
       if (timer) clearTimeout(timer);
     };
   }, [isLoading]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("section", { className: "flex-1 overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: " p-4 flex flex-col gap-y-3 overflow-y-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      QuickMenus,
-      {
-        bannerSrc: defaultBanner,
-        menus: defaultQuickMenus,
-        message: defaultQuickMenuMessage,
-        handleClick
-      }
-    ),
-    messagesDisplay == null ? void 0 : messagesDisplay.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      MessageBubble,
-      {
-        message,
-        handleClick
-      },
-      message.id
-    )),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, { message: loadingMessage }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef }),
-    displayWelcomeMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 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 UTECH AI" })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("section", { className: "flex-1 overflow-y-auto relative", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: " p-4 flex flex-col gap-y-3 overflow-y-auto min-h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconAI, { className: "mb-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(QuickMenus, { bannerSrc: defaultBanner, menus: defaultQuickMenus, message: defaultQuickMenuMessage, handleClick })
+    ] }),
+    messagesDisplay == null ? void 0 : messagesDisplay.map((message) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageBubble, { message, handleClick }) }, message.id);
+    }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconAI, { className: "mb-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loading, { message: loadingMessage })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: messagesEndRef }),
+    displayWelcomeMessage && /* @__PURE__ */ (0, import_jsx_runtime15.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 } = useChatContext();
-  const handleClick = (0, import_react4.useCallback)(
-    (menu) => __async(null, null, function* () {
-      if (menu.title.includes(tryAgain) && !!(latestMessage == null ? void 0 : latestMessage.text)) {
-        return addUserMessage(latestMessage == null ? void 0 : latestMessage.text);
-      }
-      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_runtime10.jsxs)("section", { className: "bg-white h-42.5 lg:h-46", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      quick_menus_chip_default,
-      {
-        handleClick,
-        menus: defaultQuickMenuChips,
-        className: "pl-4 pt-4 pb-2"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const { addUserMessage, addBotMessage, latestMessage, isLoading } = useChatContext();
+  const handleClick = (0, import_react3.useCallback)((menu) => __async(null, null, function* () {
+    if (menu.title.includes(tryAgain) && !!(latestMessage == null ? void 0 : latestMessage.text)) {
+      return addUserMessage(latestMessage == null ? void 0 : latestMessage.text);
+    }
+    addUserMessage(menu.title);
+    const mockResponse2 = getMockBotMessage(menu);
+    addBotMessage(mockResponse2);
+  }), [addUserMessage, addBotMessage, latestMessage]);
+  const handleSend = (0, import_react3.useCallback)((message) => {
+    addUserMessage(message);
+    const mockResponse2 = getMockBotMessageByText(message);
+    addBotMessage(mockResponse2);
+  }, [addUserMessage, addBotMessage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "bg-white h-42.5 lg:h-46", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(quick_menus_chip_default, { handleClick, menus: defaultQuickMenuChips, className: "pl-4 pt-4 pb-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       InputBar,
       {
         placeholder: "\u0E16\u0E32\u0E21\u0E04\u0E33\u0E16\u0E32\u0E21\u0E44\u0E14\u0E49\u0E40\u0E25\u0E22...",
+        isLoading,
         onSend: handleSend,
         onImageClick: () => console.log("Image upload"),
         onMagicClick: () => console.log("AI assist")
@@ -811,82 +993,10 @@ var ChatFooter = () => {
     )
   ] });
 };
-// src/components/test-component.tsx
-var import_react5 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var TestComponent = ({ client }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AizuClientProvider, { client, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TestComponentContent, {}) });
-};
-var TestComponentContent = () => {
-  const { sendMessage, resourceId, threadId } = useAizuClient();
-  const [query, setQuery] = (0, import_react5.useState)("");
-  const [response, setResponse] = (0, import_react5.useState)("");
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const handleSend = () => __async(null, null, function* () {
-    if (!query.trim()) return;
-    try {
-      setLoading(true);
-      setResponse("");
-      console.log("\u{1F4E4} Sending query:", query);
-      const result = yield sendMessage(query);
-      console.log("\u2705 Got response:", result);
-      setResponse(result.response);
-      setQuery("");
-    } catch (error) {
-      console.error("\u274C Error:", error);
-      setResponse(`\u274C Error: ${error.message}`);
-    } finally {
-      setLoading(false);
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "border-2 border-blue-500 p-4 rounded space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "font-bold text-xl", children: "Test API Call" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm text-gray-600 space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { children: [
-        "\u{1F517} Thread ID: ",
-        threadId || "(none yet)"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { children: [
-        "\u{1F4E6} Resource ID: ",
-        resourceId || "(none yet)"
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "input",
-        {
-          type: "text",
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          onKeyDown: (e) => e.key === "Enter" && handleSend(),
-          placeholder: "Type your question...",
-          className: "flex-1 border p-2 rounded",
-          disabled: loading
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: handleSend,
-          disabled: loading || !query.trim(),
-          className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:bg-gray-400",
-          children: loading ? "Sending..." : "Send"
-        }
-      )
-    ] }),
-    response && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "p-3 bg-gray-100 rounded", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: "Response:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 whitespace-pre-wrap", children: response })
-    ] })
-  ] });
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AizuChat,
   Button,
   Loading,
-  QuickMenus,
-  TestComponent
+  QuickMenus
 });