@appsbd/vue3-appsbd-ui 1.0.14 → 1.0.15

package/.ai/ai_ref_AbChatBox.md

@@ -0,0 +1,148 @@
+# AbChatBox — AI Reference
+
+A full chat conversation container built on top of `AbChatInput` — header, scrollable message list (with
+empty/typing states), and the composer. Every part is slot-overridable, so pick this over building a chat UI by
+hand whenever you need a message list around `AbChatInput`, not just the composer itself.
+
+## Installation
+
+Not globally registered — import it explicitly:
+
+```js
+import { AbChatBox } from 'vue3-appsbd-ui';
+```
+
+No extra peer deps beyond `AbChatInput`'s own (`@lucide/vue`).
+
+## Usage
+
+`v-model:messages` holds the conversation array, `v-model` holds the composer's text. Submitting auto-appends the
+user's message and fires `send` — handle that to call your API and push the reply back:
+
+```vue
+<template>
+  <AbChatBox
+    v-model="message"
+    v-model:messages="messages"
+    title="Support Bot"
+    subtitle="Usually replies in a few seconds"
+    :loading="loading"
+    @send="onSend"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { AbChatBox } from 'vue3-appsbd-ui';
+
+const message = ref('');
+const messages = ref([
+  { id: 1, role: 'assistant', name: 'Assistant', text: 'Hi! How can I help you today?' },
+]);
+const loading = ref(false);
+
+function onSend({ message, files }) {
+  loading.value = true;
+  callMyApi(message).then((reply) => {
+    loading.value = false;
+    messages.value.push({ id: Date.now(), role: 'assistant', text: reply });
+  });
+}
+</script>
+```
+
+Any `AbChatInput` prop/event/slot works directly on `AbChatBox` — it's forwarded straight to the inner composer:
+
+```vue
+<template>
+  <AbChatBox
+    v-model="message"
+    v-model:messages="messages"
+    v-model:files="files"
+    :max-file-size="2"
+    :allowed-extensions="['jpg', 'jpeg', 'png', 'pdf']"
+    placeholder="Ask anything"
+  >
+    <template #single-input="{ addToAttach }">
+      <AbChatInputMenuItem :icon="Paperclip" name="Upload file" :action="() => addToAttach()" />
+    </template>
+  </AbChatBox>
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `messages` | `Array` | `[]` | v-model:messages. See "Message shape" below. |
+| `modelValue` | `String` | `""` | Two-way-bound composer text — forwarded to the inner `AbChatInput`. |
+| `title` | `String` | `""` | Default header title (translated). |
+| `subtitle` | `String` | `""` | Default header subtitle (translated). |
+| `avatar` | `String` | `""` | Default header avatar image URL. |
+| `loading` | `Boolean` | `false` | Shows the typing indicator at the bottom of the message list. |
+| `emptyText` | `String` | `"Start a conversation"` | Text shown by the default empty state (translated). |
+| `emptyIcon` | `Object \| Function` | `MessageCircle` | Icon shown above `emptyText`. Pass `null` to hide it. |
+| `autoScroll` | `Boolean` | `true` | Auto-scrolls the message list to the bottom on new messages / `loading` changes. |
+| `containerClass` | `String` | `undefined` | Extra class on the root element. |
+
+Any other prop not listed above (`placeholder`, `disabled`, `readonly`, `minHeight`, `maxHeight`, `submitOnEnter`,
+`allowNewLine`, `autoFocus`, `autoPreview`, `maxFileSize`, `allowedExtensions`, `borderRadius`,
+`filePreviewWidth`, `filePreviewHeight`, `showFileName`, `showVoiceButton`, ...) falls through untouched to the
+inner `AbChatInput` — see `.ai/ai_ref_AbChatInput.md` for the full list.
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:messages` | `Message[]` | v-model:messages sync — fires after the user's message is auto-appended, or after `addMessage()`. |
+| `update:modelValue` | `string` | v-model sync for the composer text. |
+| `send` | `{ message: string, files: FileEntry[] }` | Fired right after the user's message is auto-appended to `messages` — hook here to call an API and push the reply. |
+
+Any other `AbChatInput` event (`focus`, `blur`, `keydown`, `file-click`, `file-remove`, `file-reject`,
+`voice-start`, `voice-stop`, `voice-cancel`, `voice-error`, `update:files`) is forwarded straight from the inner
+composer — listen for it on `AbChatBox` exactly as you would on `AbChatInput`. Note: `submit` itself is **not**
+forwarded — `AbChatBox` consumes it internally to auto-append + emit `send`.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `header` | Overrides the entire header. Scoped: `{ title, subtitle, avatar }`. |
+| `header-actions` | Adds content to the right side of the default header, without replacing it. |
+| `empty` | Overrides the empty state (shown when `messages` is empty). |
+| `message` | Overrides one message's whole bubble. Scoped: `{ message, index }`. |
+| `message-avatar` | Overrides just the avatar inside the default bubble. Scoped: `{ message }`. |
+| `typing` | Overrides the typing indicator (shown when `loading` is `true`). |
+| `left` / `right` / `send-button` / `menu-trigger` / `single-input` / `multiple-input` | `AbChatInput`'s own slots — forwarded straight through to the inner composer with the same scoped props (`addToAttach`, `addFiles`, `removeFile`, `clearFiles`, `updateText`, `focus`, `submit`). See `.ai/ai_ref_AbChatInput.md`. |
+
+## v-model
+
+Yes — two v-models: `modelValue` + `update:modelValue` (string, the composer text) and `messages` +
+`update:messages` (`Message[]`, the conversation). A third, `files` + `update:files`, is available by passthrough
+if you use `v-model:files` (forwarded to the inner `AbChatInput`).
+
+### Message shape
+
+Any plain object works — only `role` is read internally (to align the bubble left/right); everything else is
+just read by the default bubble template (or your own, via `#message`).
+
+```js
+{
+  id,      // stable key; auto-generated if omitted
+  role,    // "user" | "assistant" | "system" — "user" aligns right, others left
+  text,    // message body
+  name,    // optional sender name, shown above the text
+  avatar,  // optional avatar image URL
+  time,    // optional string, shown below the text
+  files,   // optional array — rendered as a small attachment list ({ name } or a plain string)
+}
+```
+
+## Exposed methods
+
+| Method | Description |
+| --- | --- |
+| `addMessage(message)` | Appends a message (fills in a default `id`/`role` if omitted), fires `update:messages`, and auto-scrolls. Returns the stored message. |
+| `scrollToBottom()` | Scrolls the message list to the bottom. |
+| `focus()` | Focuses the composer's textarea. |
+| `chatInput` | Raw template ref to the inner `AbChatInput` — call any of its own exposed methods directly (`submit()`, `addToAttach()`, `startRecording()`, etc). See `.ai/ai_ref_AbChatInput.md`. |

package/.ai/ai_ref_AbChatInput.md

@@ -14,21 +14,17 @@ No extra peer deps beyond the library's own (`@lucide/vue` for the default "+" i
 
 ## Usage
 
+A send button (arrow-up icon, `AbButton` with `color="primary"`) renders on the right by default and calls the
+same submit logic as pressing Enter — no manual wiring needed:
+
 ```vue
 <template>
-  <AbChatInput v-model="message" placeholder="Ask anything" @submit="onSubmit">
-    <template #right>
-      <button type="button" class="btn btn-primary btn-sm rounded-circle">
-        <ArrowUp :size="16" />
-      </button>
-    </template>
-  </AbChatInput>
+  <AbChatInput v-model="message" placeholder="Ask anything" @submit="onSubmit" />
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import { AbChatInput } from 'vue3-appsbd-ui';
-import { ArrowUp } from '@lucide/vue';
 
 const message = ref('');
 function onSubmit({ message, files }) {
@@ -37,6 +33,21 @@ function onSubmit({ message, files }) {
 </script>
 ```
 
+Override the default send button via the scoped `#send-button` slot (e.g. to add a label, swap the icon, or
+change its color) — call the scoped `submit()` to fire the same `submit` event the default button would:
+
+```vue
+<template>
+  <AbChatInput v-model="message" @submit="onSubmit">
+    <template #send-button="{ submit }">
+      <AbButton color="success" is-icon-btn is-rounded size="sm" @click="submit">
+        <Send :size="18" />
+      </AbButton>
+    </template>
+  </AbChatInput>
+</template>
+```
+
 Add/more dropdown (0 items = no trigger, 1 item = direct action with no popover, 2+ items = a real dropdown):
 
 ```vue
@@ -76,7 +87,8 @@ a native file picker and routes the selection through `addFiles`) among other me
 ## Voice input
 
 Uses the browser's native Web Speech API (`SpeechRecognition`) — no extra dependency, no API key. A built-in mic
-button renders in the `right` area (next to the `right` slot) whenever `showVoiceButton` is `true` (default).
+button renders in the `right` area (before the `right` slot and the send button) whenever `showVoiceButton` is
+`true` (default).
 Clicking it (or calling `startRecording()`) swaps the whole composer row for a full-width recording bar — a live
 audio-reactive waveform (via `getUserMedia` + `AnalyserNode`) plus three controls:
 
@@ -92,8 +104,17 @@ with a searchable list of ~130 BCP-47 locales; picking one sets that recognition
 and persists the choice to `localStorage` (key `apbd-chat-input-voice-lang`) so it's remembered next visit. This
 never touches the browser's own language/locale settings — only this component's own recognizer instance.
 
-Not supported in Firefox/Safari — the mic button still renders there but is `disabled`, with a tooltip explaining
-why. Requires the browser's mic permission prompt to be accepted.
+Not supported in Firefox. On iOS, only Safari itself gets it — Chrome/Firefox/Edge/Opera on iOS run on the same
+underlying WebKit engine and expose the same `webkitSpeechRecognition` constructor, but iOS never grants the mic
+permission for it outside of Safari's own app (no permission prompt ever appears; `.start()` would otherwise fail
+with a confusing, prompt-less "permission denied"), so these are detected via user-agent and treated as unsupported
+too. The mic button still renders in all of these cases but is `disabled`, with a tooltip explaining why. Where it
+is supported, requires the browser's mic permission prompt to be accepted.
+
+On Android, the live waveform is skipped (bars stay flat) — recognition and transcription work normally. Android's
+mic hardware only allows one exclusive audio-capture session at a time; a second concurrent `getUserMedia` stream
+for the waveform would starve `SpeechRecognition` of audio (no error, no transcript, ever). This is detected via
+user-agent, not feature-tested.
 
 ## Props
 
@@ -142,12 +163,13 @@ why. Requires the browser's mic permission prompt to be accepted.
 | Name | Description |
 | --- | --- |
 | `left` | Left action area (e.g. an attachment button). Scoped — see below. |
-| `right` | Right action area (e.g. send/mic button). Scoped — see below. |
+| `right` | Right action area, rendered before the send button (e.g. extra icon buttons). Scoped — see below. |
+| `send-button` | Overrides the default send button (an `AbButton` with an arrow-up icon, `color="primary"`, calling `submit()`). Always rendered — there's no prop to hide it; override this slot with empty content if you don't want one. Scoped — see below. |
 | `menu-trigger` | Overrides the default "+" icon on the add/more trigger. Only rendered when the trigger itself renders (see below). Scoped — see below. |
 | `single-input` | One static `AbChatInputMenuItem` for the add/more dropdown. Scoped — see below. |
 | `multiple-input` | A `v-for`'d set of `AbChatInputMenuItem`s for the add/more dropdown. Scoped — see below. |
 
-**All five slots are scoped**, receiving the same props so slot content can drive the composer directly:
+**All six slots are scoped**, receiving the same props so slot content can drive the composer directly:
 
 | Scoped prop | Description |
 | --- | --- |
@@ -157,6 +179,7 @@ why. Requires the browser's mic permission prompt to be accepted.
 | `clearFiles()` | Same as the exposed method. |
 | `updateText(text)` | Replaces the message text (fires `update:modelValue`). |
 | `focus()` | Focuses the textarea. |
+| `submit()` | Same as the exposed method — fires `submit` with `{ message, files }`. No-op when `disabled`/`readonly`. |
 
 A single-item `#single-input`/`#multiple-input` action can use these directly — `onMenuTriggerClick`'s no-dropdown
 fast path reads the item's `action` prop with these same bindings applied, so `:action="addToAttach"` works there too.
@@ -202,6 +225,7 @@ any slot — e.g. a toolbar button elsewhere on the page.
 | `addToAttach(options?)` | Opens a native file picker and routes the selection through `addFiles`. `options`: `{ accept, multiple }`. |
 | `updateText(text)` | Replaces the message text (fires `update:modelValue`). |
 | `focus()` | Focuses the textarea. |
+| `submit()` | Fires `submit` with `{ message, files }` (same as clicking the default send button). No-op when `disabled`/`readonly`. |
 | `startRecording()` | Starts voice input (same as clicking the mic button). No-op if unsupported/disabled/readonly/already recording. |
 | `stopRecording()` | Stops recording, keeping the transcribed text (same as the ■ button). |
 | `cancelRecording()` | Stops recording and discards the transcribed text (same as the ✕ button). |

package/.ai/ai_ref_AbDateTimePicker.md

@@ -46,7 +46,7 @@ const datetime = ref(null);
 | `monthNames` | `Array` | `undefined` | Custom full month names. |
 | `monthNamesShort` | `Array` | `undefined` | Custom short month names. |
 | `dayNames` | `Array` | `undefined` | Custom day names. |
-| `formatDigit` | `Function` | `undefined` | Locale digit formatter (e.g. Bengali digits). |
+| `digits` | `Array` | `undefined` | 10-character digits array (0-9) for locale digit transliteration (e.g. Bangla digits), overriding `globalConfig.digits`. |
 | `rangeSeparator` | `String` | `undefined` | Display separator between range start/end. |
 | `mode` | `String` | `"date"` | `date`, `time`, or `datetime`. |
 | `is24Hour` | `Boolean` | `undefined` | 24-hour clock. |

package/.ai/ai_ref_AbScrollbar.md

@@ -36,3 +36,30 @@ Each event payload is an object with `scrollTop`, `scrollHeight`, `scrollRatio`,
 | Name | Description |
 | --- | --- |
 | `default` | Scrollable content. |
+
+## Exposed methods
+
+Available via a template ref, for programmatic scroll control (e.g. scrolling a chat/message list to the bottom on new content):
+
+| Method | Description |
+| --- | --- |
+| `scrollToBottom(behavior?)` | Scrolls to the bottom. `behavior`: `"auto"` (default) or `"smooth"`. |
+| `scrollToTop(behavior?)` | Scrolls to the top. `behavior`: `"auto"` (default) or `"smooth"`. |
+| `scrollTo(options)` | Same as the native `Element.scrollTo(options)` (e.g. `{ top, left, behavior }`). |
+| `scrollArea` | Raw ref to the internal scrollable element, for anything not covered above. |
+
+```vue
+<template>
+  <AbScrollbar ref="listRef" style="height: 300px">
+    <div v-for="m in messages" :key="m.id">{{ m.text }}</div>
+  </AbScrollbar>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue';
+const listRef = ref(null);
+function onNewMessage() {
+  nextTick(() => listRef.value.scrollToBottom());
+}
+</script>
+```

package/.ai/ai_ref_global_config.md

@@ -7,13 +7,11 @@ Call `AppsbdUIConfigure` once during app initialization to set library-wide loca
 ```javascript
 import { AppsbdUIConfigure } from "@vue3-appsbd-ui";
 
-const banglaDigits = ["০", "১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"];
-
 AppsbdUIConfigure({
   monthNames: ["জানুয়ারি", "ফেব্রুয়ারি", "মার্চ", "এপ্রিল", "মে", "জুন", "জুলাই", "আগস্ট", "সেপ্টেম্বর", "অক্টোবর", "নভেম্বর", "ডিসেম্বর"],
   monthNamesShort: ["জানু", "ফেব্রু", "মার্চ", "এপ্রি", "মে", "জুন", "জুলাই", "আগস্ট", "সেপ্টে", "অক্টো", "নভে", "ডিসে"],
   dayNames: ["শনি", "রবি", "সোম", "মঙ্গল", "বুধ", "বৃহঃ", "শুক্র"],
-  formatDigit: (val) => String(val).replace(/\d/g, (d) => banglaDigits[d]),
+  digits: ["০", "১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"],
   is24Hour: false,
   rangeSeparator: " থেকে ",
   dateDataFormat: "YYYY-MM-DD",
@@ -32,7 +30,7 @@ AppsbdUIConfigure({
 | `monthNames` | `String[]` | English full names | Array of 12 full month names. |
 | `monthNamesShort` | `String[]` | English short names | Array of 12 short month names. |
 | `dayNames` | `String[]` | English 3-letter names | Array of 7 short day names (Sat-first). |
-| `formatDigit` | `Function` | `(val) => String(val)` | Digit formatter applied to `AbNumberField` (display-only) and `AbDateTimePicker`. |
+| `digits` | `String[]` | `undefined` | Array of 10 digit characters (0-9) for locale digit transliteration (e.g. Bangla digits), applied by `AbDateTimePicker` and `formatCurrency`/`formatAmount`. |
 | `rangeSeparator` | `String` | `' ↔ '` | Separator for date ranges in `AbDateTimePicker`. |
 | `is24Hour` | `Boolean` | `false` | Whether to use 24-hour format in `AbDateTimePicker`. |
 | `dateDataFormat` | `String` | `'YYYY-MM-DD'` | Global format for date data. |
@@ -56,3 +54,40 @@ AppsbdUIConfigure({
 | `button.iconPosition` | `String` | `'left'` | Global default icon position for buttons (`left`, `right`). |
 | `isModalBorder` | `Boolean` | `true` | Global default modal border. |
 | `modalLoader` | `String` | `'AbLoader'` | Global default modal loader component. |
+| `currency` | `String` | `'$'` | Global default currency symbol, used by `formatCurrency`/`formatAmount`. |
+| `currencyPosition` | `String` | `'left'` | Global default currency symbol position: `'left'`, `'right'`, `'left_space'`, `'right_space'`. |
+| `thousandSeparator` | `String` | `','` | Global default thousand separator, used by `formatCurrency`/`formatAmount`. |
+| `decimalSeparator` | `String` | `'.'` | Global default decimal separator, used by `formatCurrency`/`formatAmount`. |
+| `numberOfDecimals` | `Number` | `2` | Global default number of decimal digits, used by `formatCurrency`/`formatAmount`. |
+| `round` | `Boolean` | `false` | Global default: round to `numberOfDecimals` instead of truncating, used by `formatCurrency`/`formatAmount`. |
+
+## `formatCurrency` / `formatAmount` utils
+
+```javascript
+import { formatCurrency, formatAmount } from "@vue3-appsbd-ui";
+
+formatCurrency(1234.5);
+// -> "$1,234.50" (uses globalConfig.currency/currencyPosition/thousandSeparator/decimalSeparator/numberOfDecimals)
+
+formatCurrency(1234.5, { currency: "৳", currencyPosition: "right_space", numberOfDecimals: 0 });
+// -> "1,234 ৳"
+
+formatAmount(1234.5); // plain number, no currency symbol -> "1,234.50"
+
+// round (default false) — extra decimals are truncated, not rounded up:
+formatCurrency(1234.499);               // -> "$1,234.49" (truncated)
+formatCurrency(1234.499, { round: true }); // -> "$1,234.50" (rounded)
+```
+
+Any option not passed falls back to `globalConfig`, then to the hardcoded default (prop > global config > built-in default, same resolution order as other components). `digits` (see above, or `options.digits` per-call) is also applied to the formatted output via the internal `formatDigits` util. By default `round` is `false`: `numberOfDecimals` truncates extra digits rather than rounding (`1234.499` at 2 decimals -> `1234.49`, never `1234.50`); pass `round: true` (or `globalConfig.round = true`) for standard rounding.
+
+## `formatDigits` util
+
+```javascript
+import { formatDigits } from "@vue3-appsbd-ui";
+
+formatDigits(123); // no globalConfig.digits set -> "123"
+formatDigits(123, ["০", "১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"]); // -> "১২৩"
+```
+
+Used internally by `AbDateTimePicker` (`digits` prop) and `formatCurrency`/`formatAmount` (`options.digits`) to transliterate digits; falls back to `globalConfig.digits` when no array is passed, and returns the value unchanged (stringified) when neither is set.

package/.ai/ai_ref_migration_guide.md

@@ -0,0 +1,90 @@
+# Migration Guide — AI Reference
+
+> Read this file when upgrading a consuming project's `@appsbd/vue3-appsbd-ui` version. It exists to drive *automated* upgrades of consumer code — it does not replace `AI_REFERENCE.md` (current API surface) or [`CHANGELOG.md`](../CHANGELOG.md) (full human-readable prose per release). After applying an entry below, re-check the affected component's `.ai/ai_ref_<Name>.md` for its current API shape.
+
+## How to apply an upgrade
+
+1. Find the consuming project's currently installed version (`package.json` → `@appsbd/vue3-appsbd-ui` / `vue3-appsbd-ui`).
+2. Walk every version section below, **oldest to newest**, strictly after the current version up to and including the target version.
+3. For each **⚠️ Action Required** item: search the consuming project with its **Find** pattern and apply its **Replace** guidance to every match.
+4. **ℹ️ Also shipped** items need no consumer-side change to keep working — they're listed so an upgrade can optionally *adopt* the new capability. Skip them freely.
+5. After applying every version's Action Required items, build/typecheck the consuming project to confirm no remaining references to removed APIs.
+
+---
+
+## [1.0.15] - 2026-08-24
+
+### ⚠️ Action Required — Breaking
+
+- **Global config `formatDigit` removed → `digits`.**
+  - Find: `formatDigit` inside any `AppsbdUIConfigure({...})` call, or a `formatDigit` / `:format-digit` prop on `<AbDateTimePicker>`.
+  - Replace: the `formatDigit: (val) => ...` function with a plain `digits: [...]` array of 10 characters (index 0 = digit `0`, ... index 9 = digit `9`). Example (Bangla): `digits: ['০','১','২','৩','৪','৫','৬','৭','৮','৯']`.
+  - Same rename applies to `AbDateTimePicker`'s own `formatDigit` prop → `digits` prop (now an array, not a function).
+
+### ℹ️ Also shipped (no action needed)
+
+- New `formatCurrency`/`formatAmount` utils + matching global config keys (`currency`, `currencyPosition`, `thousandSeparator`, `decimalSeparator`, `numberOfDecimals`, `round`) — optional to adopt for consumer-side number/currency formatting.
+- New `AbChatBox` component (wraps `AbChatInput` as a full chat UI) and new `AbScrollbar` exposed scroll methods.
+- `AbFormCheck` checked-state label color and `description-text` truncation CSS fixes; a WordPress `.is-flat-check` margin conflict fix.
+- Several `AbChatInput` voice-input (Safari/Android/iOS) and narrow-viewport layout fixes.
+
+## [1.0.14] - 2026-08-19
+
+### ⚠️ Action Required — Breaking
+
+- **`AbFormCheck` per-title dynamic slot names removed.**
+  - Find: slot names shaped `input-icon-${title}`, `option-label-${title}`, `description-${title}` used on `<AbFormCheck>`.
+  - Replace: use the static scoped slots `input-icon`, `option-label`, `description` instead — each now receives `{ check, index }`; branch inside the slot on `check.title` (or `index`) if per-option content is still needed.
+  - Note: the `description` slot's default content now renders as raw HTML (previously plain text) — escape any content that relied on literal `<`/`>` being displayed as text.
+
+### ℹ️ Also shipped (no action needed)
+
+- `abDate` library (`formatDate`/`formatDateTime`/`formatTime`/`formatCustom`), driven by new `dateDisplayFormat`/`datetimeDisplayFormat`/`timeDisplayFormat` global config keys.
+- `AbFileUploader` `type="file"` mode (`allowedTypes`, `showFileName`, `width`/`height` props).
+- `AbFormCheck` `icon-card`/`card-flat-check`/`image-radio` variants, `selectorPosition`/`isBoxShadow` props; card-family/segmented/pill rows now fully clickable.
+- `AbInputField` `input-group-text-border-both` layout (automatic).
+- `useFileValidator().getFileInfo()` gained an optional `allowedExtensions` param.
+- **Default value change (non-breaking but visible):** `AbChatInput`'s `borderRadius` prop default changed from `"1.5rem"` to `"2.5rem"` — only affects consumers who never explicitly set `borderRadius` and relied on the old default's look.
+- `AbNumberField` increment/decrement disabled-state fix; `AbMainLayout` iPhone Safari full-height fix.
+
+## [1.0.13] - 2026-08-11
+
+### ℹ️ Also shipped (no action needed)
+
+- New `AbChatInput` + `AbChatInputMenuItem` components (chat composer with attachments).
+- `AbChatInput` scoped slots (`left`/`right`/`menu-trigger`/`single-input`/`multiple-input`) now hand back `addToAttach`/`addFiles`/`removeFile`/`clearFiles`/`updateText`/`focus`; also exposed as template-ref methods.
+- `AbChatInput` `borderRadius`/`filePreviewWidth`/`filePreviewHeight`/`showFileName` props.
+- `AbFilterPanel` async `isAjaxSearch`/`onSearch`, multi-select (`isMultiple`) quick-advance `dd` fields, range-filter fix, active-filter badge style change.
+- `AbWizard` `backgroundColor` prop.
+- `useFileValidator().getFileIconByExt()` fallback-icon fix; RTL styling for `AbProgressbar`.
+
+## [1.0.12] - 2026-08-09
+
+### ℹ️ Also shipped (no action needed)
+
+- `AbCustomField` gained `CP`/`FU` field types and forwards `variant`/`card-width`/`icon-size`/`icon-gap` to radio/checkbox fields.
+- `label` option for `AbColorPicker`/`AbFileUploader`; `AbFormCheck` variation cards support a custom width.
+- `AbToggle` switch icon alignment/sizing fix.
+
+## [1.0.11] - 2026-07-30
+
+### ⚠️ Action Required — Breaking
+
+- **Icon peer dependency migrated `lucide-vue-next` → `@lucide/vue`.**
+  - Find: `import { ... } from "lucide-vue-next"` anywhere in the consuming project, and the `lucide-vue-next` entry in its `package.json`.
+  - Replace: `import { ... } from "@lucide/vue"` (same named icon exports, requires `@lucide/vue >=1.28.0`); swap the npm dependency itself (`npm uninstall lucide-vue-next && npm install @lucide/vue`).
+  - The library ships a `/migrate-lucide-icons` slash command specifically to automate this rename in consuming projects — prefer running that over a manual find/replace.
+
+### ℹ️ Also shipped (no action needed)
+
+- `AbFilterPanel` multi-variant support and documentation.
+
+## [1.0.10] and earlier
+
+No breaking changes recorded for `1.0.0` through `1.0.10` — every release in that range was purely additive (new components: `AbInputField`, `AbSideMenuItem`, `AbButton`, `AbPopover`, `AbSidebar`, `AbField`, `AbFilterPanel`, `AbCustomField`, `AbBaseAlert`, `AbConfirmPopover`, `AbFileUploader`, `AbModal`, `AbMainLayout`, `AbSettingsForm`, `abVeeRules`, `AbToggle`, `AbResponseMsg`, `AbCard`, `AbChart`, and the initial component/theme/RTL scaffolding) plus docs/CI work. See [CHANGELOG.md](../CHANGELOG.md) for the full per-release prose if needed.
+
+---
+
+## Maintainer note
+
+Whenever a new version is added to `CHANGELOG.md`, add a matching section here **only when that version contains a breaking change** (a renamed/removed prop, event, slot, exposed method, global config key, or peer dependency; a changed function signature; a default value change significant enough to alter rendered output) — give it a `### ⚠️ Action Required — Breaking` subsection with **Find**/**Replace** guidance concrete enough for an AI agent to apply mechanically in a consuming project, without needing to read the full CHANGELOG prose. Every version (breaking or not) should still get a one-line-per-item `### ℹ️ Also shipped (no action needed)` list summarizing what else landed, so an upgrading agent can spot optional new capabilities worth adopting. See [[update-ai-ref-with-component-changes]] in project memory for the full doc-sync checklist this file is part of.

package/AI_REFERENCE.md

@@ -6,6 +6,8 @@
 
 **Version history**: see [CHANGELOG.md](./CHANGELOG.md) for release-by-release notes.
 
+**Upgrading a consuming project?** Read [.ai/ai_ref_migration_guide.md](./.ai/ai_ref_migration_guide.md) — per-version breaking-change find/replace steps meant for an AI agent to apply mechanically when bumping this library's version in another project.
+
 ## Components & APIs
 
 ✅ = globally registered via `app.use(AppsbdUI)` — all others require `import { X } from "vue3-appsbd-ui"`.
@@ -58,6 +60,7 @@
 | `AbChart`                      |  —  | Flexible chart component powered by Apache ECharts.                                                                    | [.ai/ai_ref_AbChart.md](./.ai/ai_ref_AbChart.md)                       |
 | `AbChatInput`                  |  —  | ChatGPT-style auto-growing composer with an item-count-driven add/more dropdown, internal file attachment preview, and built-in Web Speech API voice input.  | [.ai/ai_ref_AbChatInput.md](./.ai/ai_ref_AbChatInput.md)               |
 | `AbChatInputMenuItem`          |  —  | Presentational row (icon/name/description/action) for `AbChatInput`'s add/more dropdown.                               | [.ai/ai_ref_AbChatInputMenuItem.md](./.ai/ai_ref_AbChatInputMenuItem.md) |
+| `AbChatBox`                    |  —  | Full chat conversation container (header, message list, empty/typing states) built on `AbChatInput`; every part is slot-overridable. | [.ai/ai_ref_AbChatBox.md](./.ai/ai_ref_AbChatBox.md)                   |
 | `AbDarkModeToggler`            |  —  | Light / dark theme toggle (pairs with `useTheme`).                                                                     | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md)   |
 | `useAlert`                     |  —  | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations.                             | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md)                     |
 | `abEventBus` / `emitterObj`    |  —  | Lightweight global event bus using `tiny-emitter`.                                                                     | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md)                 |

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to `@appsbd/vue3-appsbd-ui` are documented here. Format loosely follows [Keep a Changelog](https://keepachangelog.com/).
 
+## [1.0.15] - 2026-08-24
+
+- **Added**: `AbChatBox` — a full chat conversation container built on top of `AbChatInput`: header (title/subtitle/avatar, or fully custom via the `header`/`header-actions` slots), a scrollable message list with a default bubble renderer (overridable per-message via `message`/`message-avatar`), empty and typing states (`empty`/`typing` slots), and the composer docked at the bottom. `v-model:messages` holds the conversation, `v-model` holds the composer text; submitting auto-appends the user's message and fires `send`. Every `AbChatInput` prop, event, and slot (`left`/`right`/`send-button`/`menu-trigger`/`single-input`/`multiple-input`) is forwarded straight through to the inner composer.
+- **Added**: `AbScrollbar` exposed methods — `scrollToBottom(behavior?)`, `scrollToTop(behavior?)`, `scrollTo(options)`, and a raw `scrollArea` ref — for programmatic scroll control via a template ref (used internally by `AbChatBox`'s auto-scroll-to-bottom behavior).
+- **Added**: `formatCurrency`/`formatAmount` utils (`src/utils/formatCurrency.js`) — format a number with configurable `thousandSeparator`, `decimalSeparator`, `numberOfDecimals`, and (for `formatCurrency`) a `currency` symbol at `currencyPosition` (`'left'`, `'right'`, `'left_space'`, `'right_space'`). By default, extra decimals are truncated rather than rounded (`1234.499` at 2 decimals -> `1234.49`); pass `round: true` for standard rounding instead. New global config keys `currency`, `currencyPosition`, `thousandSeparator`, `decimalSeparator`, `numberOfDecimals`, `round` supply the defaults when not passed per call. Documented with a live demo in the `GlobalConfigTest` playground page.
+- **Fixed**: `formatAmount`'s truncation used `Math.trunc(amount * 10**n) / 10**n`, which reintroduces floating-point noise the multiplication itself creates (e.g. `19.9 * 100 === 1989.9999999999998`), silently truncating one digit too far (`19.9` at 2 decimals showed `19.89` instead of `19.90`). Now truncates against the number's own shortest round-trip string representation instead of re-multiplying it.
+- **Changed**: Global config's `formatDigit` (a `Function` consumers had to write themselves) replaced with `digits` — a plain 10-character array (e.g. `['০','১',...,'৯']`); the library now transliterates digits internally via the new `formatDigits` util. `AbDateTimePicker`'s `formatDigit` prop is likewise replaced with a `digits` prop. Breaking change for any consumer passing `formatDigit`.
+- **Fixed**: `AbFormCheck` checked card-family label color now uses `--#{$prefix}theme` instead of `--#{$prefix}apbd-border-color-focus`, matching the selected-state accent elsewhere. `description-text` no longer forces `white-space: nowrap` (was clipping to a single line regardless of card width); truncation now relies on `overflow: hidden` instead of a duplicate nested `text-overflow: ellipsis` rule.
+- **Fixed**: WordPress theme conflict — `.is-flat-check` checkbox/radio inputs now reset `margin: 0` to counter WordPress's default form-control margin.
+- **Fixed**: `AbChatInput` voice input on Safari — `SpeechRecognition` was ending the session after the very first final result despite `continuous: true`, making the mic effectively stop working after one phrase; it now auto-restarts transparently when the browser ends the session on its own (skipped when the last error was permission/hardware-related, to avoid looping).
+- **Fixed**: `AbChatInput` voice input on Android Chrome — the component's own `getUserMedia` call (used only to drive the waveform animation) held a second, concurrent mic-capture session alongside `SpeechRecognition`; Android only allows one exclusive capture session at a time, so the recognizer was starved of audio with no error and no results, even though it started listening. Requesting that stream *after* `recognition.start()` (previous attempt) wasn't sufficient — `.start()` returns before the engine actually acquires the mic, so the race remained. The waveform's `getUserMedia` call is now skipped entirely on Android (detected via user agent); recognition and transcription work normally there, just without the live waveform animation.
+- **Fixed**: `AbChatInput` voice input on iOS browsers other than Safari (Chrome, Firefox, Edge, Opera) — these share Safari's WebKit engine and expose the same `webkitSpeechRecognition` constructor, so the mic button rendered enabled, but iOS never actually grants the mic permission for it outside Safari's own app: tapping it showed no permission prompt at all and immediately surfaced a confusing "Microphone permission denied" toast. Now detected via user agent and treated as unsupported up front (button disabled, tooltip explains why), matching the real platform capability.
+- **Fixed**: `AbChatInput` — voice-transcribed text no longer grew the textarea's height. The recording UI and the normal composer (holding `<textarea ref="textareaRef">`) are mutually exclusive template branches, so the textarea is fully unmounted while listening; every resize triggered by a transcribed phrase silently no-op'd against a null ref, and nothing re-measured it once recording ended and the textarea remounted (typing anything afterward was the only thing that happened to trigger a resize). Now explicitly resizes the moment recording stops.
+- **Fixed**: `AbChatInput` on narrow viewports (e.g. small mobile screens) — with an empty composer, the "grown" (stacked) layout could trigger on mount even with nothing typed. A `<textarea>`'s `scrollHeight` includes its wrapped *placeholder* text; when the left/right icon buttons leave little room, even a short placeholder can wrap onto multiple lines and inflate `scrollHeight` past `minHeight`. The grown/inline decision is now skipped entirely when there's no actual value — the compact single-row layout is forced instead.
+
 ## [1.0.14] - 2026-08-19
 
 - **Added**: `abDate` library — dependency-free date/datetime/time formatter (`formatDate`, `formatDateTime`, `formatTime`, `formatCustom`) with no timezone conversion; resolves its default format from the new `dateDisplayFormat`/`datetimeDisplayFormat`/`timeDisplayFormat` global config keys, falling back to MySQL-style defaults (`YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, `HH:mm:ss`). Same token set as `AbDateTimePicker`, plus real second support (`ss`/`s`). Documented in the new `AbDateTest` playground page.