@ethora/chat-component 26.5.1 → 26.5.3

package/README.md

@@ -355,7 +355,8 @@ Below is a grouped reference for all `config` options.
 | `headerLogo` | `string \| React.ReactElement` | Custom logo in header. |
 | `headerMenu` | `() => void` | Custom menu handler. |
 | `headerChatMenu` | `() => void` | Custom room header menu handler. |
-| `colors` | `{ primary; secondary; icons? }` | Theme colours. `primary` also drives icon colours and the message sender name; set `colors.icons` to give icons (attach, mic, send, file, empty-state) a colour independent of `primary`. |
+| `colors` | `{ primary; secondary; icons?; ownMessageBackground?; otherMessageBackground?; inputBackground? }` | Theme colours. `primary` drives icon colours and the sender name. `icons` themes every accent icon/icon-button (attach, mic, active send, new-chat, header, empty-state) — defaults to `primary`, so set a *distinct* value to decouple. `ownMessageBackground`/`otherMessageBackground`/`inputBackground` recolour the message bubbles and input bar. |
+| `backgroundChat` | `{ color?; image? }` | Background colour and/or image for the messages area. (`image` as a string URL; pass an object URL for a `File`.) |
 | `typography` | `TypographyConfig` | Font family + size for the chat UI: `fontFamily` (or just `googleFontsFamily`) is applied across all chat text incl. messages and sender names; `fontSize` (px) scales message text, sender names, timestamps, inputs, room names and badges. Plus loaders (`googleFontsUrl`/`fontFaces`) and weight tokens. |
 | `fallbackScreens` | `{ noUser?; noConnection?; noRoom? }` | Replace the built-in screens (Ethora login form, "Connecting...", empty room state) with your own text or React nodes. A plain string is rendered as centered text. |
 | `hiddenRooms` | `{ titles?: string[]; jids?: string[] }` | Hide specific rooms from the room list and unread counters (e.g. `{ titles: ['Main chat'] }` to suppress the auto-created default room). |

package/dist/components/InputComponents/Search.d.ts

@@ -3,6 +3,7 @@ interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     icon?: React.ReactNode;
     animated?: boolean;
     direction?: 'left' | 'right';
+    colorBg?: string;
 }
 declare const SearchInput: React.FC<SearchInputProps>;
 export { SearchInput };

package/dist/components/styled/StyledInput.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 interface StyledInputProps {
     label?: string;
     color?: string;
+    colorBg?: string;
     helperText?: string;
     error?: boolean;
     [key: string]: any;

package/dist/components/styled/StyledInputComponents/StyledInputComponents.d.ts

@@ -2,6 +2,7 @@ export declare const InputContainer: import('styled-components/dist/types').ISty
 export declare const MessageInputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const MessageInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     $color?: string;
+    $colorBg?: string;
 }>> & string;
 export declare const HiddenFileInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 export declare const Timer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -11,13 +12,17 @@ export declare const FilePreviewContainer: import('styled-components/dist/types'
 export declare const FilePreview: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ImagePreview: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const VideoPreview: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, never>> & string;
-export declare const StyledInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $colorBg?: string;
+}>> & string;
 export declare const TextareaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $dynamicHeight?: number;
     $color?: string;
     $isFocused?: boolean;
+    $colorBg?: string;
 }>> & string;
 export declare const TextareaInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
     $dynamicHeight?: number;
     $color?: string;
+    $colorBg?: string;
 }>> & string;

package/dist/helpers/resolveIconColor.d.ts

@@ -11,13 +11,15 @@ export declare const resolveIconColor: (config?: Pick<IConfig, "colors"> | null)
 /** CSS variable read by the chat's chrome icons as their default colour. */
 export declare const ICON_COLOR_VAR = "--ethora-icon-color";
 /**
- * Publish the resolved icon colour on the `--ethora-icon-color` CSS variable.
- * Chrome icons default their `fill`/`stroke` to `var(--ethora-icon-color, …)`,
- * so setting this themes every neutral icon at once without touching call
- * sites. When neither `colors.icons` nor `colors.primary` is set, the variable
- * is removed and each icon falls back to its own literal default.
+ * Publish host theme colours as CSS variables that the chat's styled
+ * components read with their historical defaults as fallbacks. Covers icons,
+ * own/other message bubble backgrounds, the input bar, and the chat
+ * background (`backgroundChat.color` / `.image`).
  *
- * Semantic icons (destructive red, status ticks, brand) intentionally keep
- * their literal colours and ignore this variable. SSR-safe (no-op without DOM).
+ * Setting nothing keeps the chat pixel-identical (each var resolves to its
+ * literal fallback). SSR-safe (no-op without DOM). Semantic icons (destructive
+ * red, status ticks, brand) intentionally ignore the icon variable.
  */
-export declare const applyIconColor: (config?: Pick<IConfig, "colors"> | null) => void;
+export declare const applyThemeColors: (config?: Pick<IConfig, "colors" | "backgroundChat"> | null) => void;
+/** @deprecated use {@link applyThemeColors}; kept for backwards compatibility. */
+export declare const applyIconColor: (config?: Pick<IConfig, "colors" | "backgroundChat"> | null) => void;

package/dist/hooks/useUnreadMessagesCounter.d.ts

@@ -11,10 +11,12 @@ interface UnreadMessagesStats {
     displayTotal: string;
     displayByRoom: UnreadMessagesDisplayMap;
     /**
-     * True while the unread counts are not trustworthy yet — i.e. until the
-     * room list has been populated at least once (from cache or the API), or
-     * until the first rooms load cycle finishes for an account with no rooms.
-     * Lets consumers show a spinner/skeleton instead of a misleading "0".
+     * True while the unread counts are still settling on first load. Instead of
+     * surfacing the count as it ramps up (0 → 2 → 3 … as history backfills), the
+     * hook keeps `loading` true until the per-room counts have stopped changing
+     * for a short window, then latches it to false. After that first settle,
+     * live message increments update the counts immediately and never flip
+     * `loading` back on — it's a first-load indicator, not a per-update one.
      */
     loading: boolean;
     /** Alias of `loading` — matches the React Native SDK field name. */