@inorain_development/hotel-smarters-chat-ui 1.2.1 → 1.3.0

package/src/features/chat/components/order/order.tsx

@@ -0,0 +1,176 @@
+import { Fragment } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getOrderStatusStyle } from '../../../../utils/order.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible';
+import { CartIcon } from '../common/cart-icon';
+import { ChevronIcon } from '../common/chevron-icon';
+import { OrderStatus } from './order.model';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { OrderListItem, OrderRow } from './order.model';
+
+export function Order({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel,
+  onAction,
+  onSelect,
+}: ChatComponentProps<OrderListItem>) {
+  const c = getThemeClasses(theme);
+  const order = Array.isArray(data) ? data[0] : data;
+  const items = order?.items ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(items);
+
+  if (!order) return null;
+
+  const onSelectRow = onSelect as ((row: OrderRow) => void) | undefined;
+  const location = order.location ? resolveText(order.location, language) : undefined;
+  const totalLabel = order.totalLabel ? resolveText(order.totalLabel, language) : undefined;
+  const action = order.actionLabel
+    ? resolveText(order.actionLabel, language)
+    : typeof actionLabel === 'function'
+      ? actionLabel(order)
+      : actionLabel;
+  const headerStyle = getOrderStatusStyle(order.status, theme);
+  const headerStatusLabel = order.statusLabel ? resolveText(order.statusLabel, language) : headerStyle.label;
+
+  const renderRow = (row: OrderRow) => {
+    const name = resolveText(row.name, language);
+    const isRejected = row.status === OrderStatus.Rejected;
+    const s = getOrderStatusStyle(row.status, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+
+    return (
+      <button
+        type="button"
+        className="flex w-full items-center gap-3 py-2.5 text-left"
+        onClick={() => onSelectRow?.(row)}
+      >
+        <div className="relative shrink-0">
+          {row.image ? (
+            <img src={row.image} alt={name} className={`h-11 w-11 rounded-lg object-cover ${c.iconBg}`} />
+          ) : (
+            <div className={`h-11 w-11 rounded-lg ${c.iconBg}`} />
+          )}
+          {row.quantity > 1 ? (
+            <span className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-500 text-[10px] font-bold text-white">
+              {row.quantity}
+            </span>
+          ) : null}
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-sm font-semibold ${isRejected ? 'line-through opacity-60' : ''} ${c.title}`}>
+              {name}
+            </span>
+            <span className={`shrink-0 text-sm font-bold ${isRejected ? 'line-through opacity-60' : ''} ${c.price}`}>
+              {row.price}
+            </span>
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-xs ${c.subtitle}`}>
+              {row.unitPrice ? `${row.unitPrice} each` : ''}
+              {row.unitPrice && row.duration ? ' · ' : ''}
+              {row.duration ?? ''}
+            </span>
+            {row.status ? (
+              <span className={`shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold ${s.badgeBg} ${s.badgeText}`}>
+                {statusLabel}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <div className={`rounded-2xl border p-3.5 ${c.surface} ${c.border}`}>
+      <div className="flex items-center gap-3">
+        <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${c.iconBg}`}>
+          <CartIcon size={20} color={c.iconColor} />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className={`truncate text-base font-bold ${c.title}`}>Order #{order.orderNumber}</span>
+          {location ? <span className={`truncate text-xs ${c.subtitle}`}>{location}</span> : null}
+        </div>
+
+        <span
+          className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${headerStyle.badgeBg} ${headerStyle.badgeText}`}
+        >
+          {headerStatusLabel}
+        </span>
+      </div>
+
+      <div className={`my-3 h-px ${c.divider}`} />
+
+      {head.map((row, index) => (
+        <Fragment key={row.id}>
+          {index > 0 ? <div className={`h-px ${c.divider}`} /> : null}
+          {renderRow(row)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <Collapsible expanded={expanded}>
+          {rest.map((row) => (
+            <Fragment key={row.id}>
+              <div className={`h-px ${c.divider}`} />
+              {renderRow(row)}
+            </Fragment>
+          ))}
+        </Collapsible>
+      ) : null}
+
+      {hasMore ? (
+        <button
+          type="button"
+          onClick={toggle}
+          className="mt-1 flex w-full items-center justify-between gap-2 rounded-xl py-2"
+        >
+          <div className="flex items-center gap-2">
+            <span className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold ${c.iconBg} ${c.iconText}`}>
+              +{rest.length}
+            </span>
+            <span className={`text-sm ${c.subtitle}`}>
+              {expanded ? `Showing all ${items.length} items` : `Showing ${head.length} of ${items.length} items`}
+            </span>
+          </div>
+          <span className={`flex shrink-0 items-center gap-1 text-sm font-semibold ${c.iconText}`}>
+            {expanded ? 'Show less' : 'View all'}
+            <span className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
+              <ChevronIcon size={14} color="currentColor" />
+            </span>
+          </span>
+        </button>
+      ) : null}
+
+      {order.total || action ? (
+        <>
+          <div className={`my-3 h-px ${c.divider}`} />
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex flex-col">
+              {totalLabel ? <span className={`text-xs ${c.subtitle}`}>{totalLabel}</span> : null}
+              {order.total ? <span className={`text-lg font-bold ${c.title}`}>{order.total}</span> : null}
+            </div>
+
+            {action ? (
+              <button
+                type="button"
+                onClick={() => onAction?.(order, ItemAction.Track)}
+                className="rounded-xl bg-indigo-500 px-4 py-2 text-sm font-semibold text-white"
+              >
+                {action}
+              </button>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/components/reservation/index.ts

@@ -0,0 +1,3 @@
+export { Reservation } from './reservation';
+export { ReservationStatus } from './reservation.model';
+export type { ReservationListItem, ReservationRow } from './reservation.model';

package/src/features/chat/components/reservation/reservation.model.ts

@@ -0,0 +1,29 @@
+import type { LocalizedText } from '../../model/chat.model';
+
+export enum ReservationStatus {
+  Pending = 'pending',
+  Confirmed = 'confirmed',
+  Cancelled = 'cancelled',
+}
+
+export interface ReservationRow {
+  id: number;
+  name: LocalizedText;
+  date: string;
+  time: string;
+  duration?: string;
+  price: string;
+  status: ReservationStatus;
+  statusLabel?: LocalizedText;
+}
+
+export interface ReservationListItem {
+  title: LocalizedText;
+  subtitle?: LocalizedText;
+  status?: ReservationStatus;
+  statusLabel?: LocalizedText;
+  reservations: ReservationRow[];
+  totalLabel?: LocalizedText;
+  total?: string;
+  actionLabel?: LocalizedText;
+}

package/src/features/chat/components/reservation/reservation.native.tsx

@@ -0,0 +1,159 @@
+import { Fragment } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getReservationStatusStyle } from '../../../../utils/reservation.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible.native';
+import { CalendarIcon } from '../common/calendar-icon.native';
+import { ChevronIcon } from '../common/chevron-icon.native';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ReservationListItem, ReservationRow } from './reservation.model';
+
+export function Reservation({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel,
+  onAction,
+  onSelect,
+}: ChatComponentProps<ReservationListItem>) {
+  const c = getThemeClasses(theme);
+  const list = Array.isArray(data) ? data[0] : data;
+  const reservations = list?.reservations ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(reservations);
+
+  if (!list) return null;
+
+  const onSelectRow = onSelect as ((row: ReservationRow) => void) | undefined;
+  const title = resolveText(list.title, language);
+  const subtitle = list.subtitle ? resolveText(list.subtitle, language) : undefined;
+  const totalLabel = list.totalLabel ? resolveText(list.totalLabel, language) : undefined;
+  const action = list.actionLabel
+    ? resolveText(list.actionLabel, language)
+    : typeof actionLabel === 'function'
+      ? actionLabel(list)
+      : actionLabel;
+  const headerStyle = getReservationStatusStyle(list.status, theme);
+  const headerStatusLabel = list.statusLabel ? resolveText(list.statusLabel, language) : headerStyle.label;
+
+  const renderRow = (row: ReservationRow) => {
+    const s = getReservationStatusStyle(row.status, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+    const name = resolveText(row.name, language);
+
+    return (
+      <Pressable className="flex-row items-center gap-3 py-2.5" onPress={() => onSelectRow?.(row)}>
+        <View className={`h-11 w-11 items-center justify-center rounded-xl ${c.mutedIconBg}`}>
+          <CalendarIcon size={18} color={c.mutedIconColor} />
+        </View>
+
+        <View className="flex-1 gap-1">
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-sm font-semibold ${c.title}`} numberOfLines={1}>
+              {name}
+            </Text>
+            <Text className={`text-sm font-bold ${c.price}`}>{row.price}</Text>
+          </View>
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-xs ${c.subtitle}`} numberOfLines={1}>
+              {row.date} · {row.time}
+              {row.duration ? ` · ${row.duration}` : ''}
+            </Text>
+            <View className={`rounded-full px-2 py-0.5 ${s.badgeBg}`}>
+              <Text className={`text-[11px] font-semibold ${s.badgeText}`}>{statusLabel}</Text>
+            </View>
+          </View>
+        </View>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className={`rounded-2xl border p-3.5 ${c.surface} ${c.border}`}>
+      <View className="flex-row items-center gap-3">
+        <View className={`h-11 w-11 items-center justify-center rounded-xl ${c.iconBg}`}>
+          <CalendarIcon size={20} color={c.iconColor} />
+        </View>
+
+        <View className="flex-1">
+          <Text className={`text-base font-bold ${c.title}`} numberOfLines={1}>
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text className={`text-xs ${c.subtitle}`} numberOfLines={1}>
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+
+        <View className={`rounded-full px-2.5 py-1 ${headerStyle.badgeBg}`}>
+          <Text className={`text-xs font-semibold ${headerStyle.badgeText}`}>{headerStatusLabel}</Text>
+        </View>
+      </View>
+
+      <View className={`my-3 h-px ${c.divider}`} />
+
+      {head.map((row, index) => (
+        <Fragment key={row.id}>
+          {index > 0 ? <View className={`h-px ${c.divider}`} /> : null}
+          {renderRow(row)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <Collapsible expanded={expanded}>
+          {rest.map((row) => (
+            <Fragment key={row.id}>
+              <View className={`h-px ${c.divider}`} />
+              {renderRow(row)}
+            </Fragment>
+          ))}
+        </Collapsible>
+      ) : null}
+
+      {hasMore ? (
+        <Pressable onPress={toggle} className="mt-1 flex-row items-center justify-between gap-2 py-2">
+          <View className="flex-row items-center gap-2">
+            <View className={`h-7 w-7 items-center justify-center rounded-full ${c.iconBg}`}>
+              <Text className={`text-xs font-semibold ${c.iconText}`}>+{rest.length}</Text>
+            </View>
+            <Text className={`text-sm ${c.subtitle}`}>
+              {expanded
+                ? `Showing all ${reservations.length} requests`
+                : `Showing ${head.length} of ${reservations.length} requests`}
+            </Text>
+          </View>
+          <View className="flex-row items-center gap-1">
+            <Text className={`text-sm font-semibold ${c.iconText}`}>{expanded ? 'Show less' : 'View all'}</Text>
+            <View className={expanded ? 'rotate-180' : undefined}>
+              <ChevronIcon size={14} color={c.iconColor} />
+            </View>
+          </View>
+        </Pressable>
+      ) : null}
+
+      {list.total || action ? (
+        <>
+          <View className={`my-3 h-px ${c.divider}`} />
+          <View className="flex-row items-center justify-between gap-3">
+            <View>
+              {totalLabel ? <Text className={`text-xs ${c.subtitle}`}>{totalLabel}</Text> : null}
+              {list.total ? <Text className={`text-lg font-bold ${c.title}`}>{list.total}</Text> : null}
+            </View>
+
+            {action ? (
+              <Pressable
+                onPress={() => onAction?.(list, ItemAction.Manage)}
+                className="rounded-xl bg-indigo-500 px-4 py-2"
+              >
+                <Text className="text-sm font-semibold text-white">{action}</Text>
+              </Pressable>
+            ) : null}
+          </View>
+        </>
+      ) : null}
+    </View>
+  );
+}

package/src/features/chat/components/reservation/reservation.tsx

@@ -0,0 +1,161 @@
+import { Fragment } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getReservationStatusStyle } from '../../../../utils/reservation.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible';
+import { CalendarIcon } from '../common/calendar-icon';
+import { ChevronIcon } from '../common/chevron-icon';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ReservationListItem, ReservationRow } from './reservation.model';
+
+export function Reservation({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel,
+  onAction,
+  onSelect,
+}: ChatComponentProps<ReservationListItem>) {
+  const c = getThemeClasses(theme);
+  const list = Array.isArray(data) ? data[0] : data;
+  const reservations = list?.reservations ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(reservations);
+
+  if (!list) return null;
+
+  const onSelectRow = onSelect as ((row: ReservationRow) => void) | undefined;
+  const title = resolveText(list.title, language);
+  const subtitle = list.subtitle ? resolveText(list.subtitle, language) : undefined;
+  const totalLabel = list.totalLabel ? resolveText(list.totalLabel, language) : undefined;
+  const action = list.actionLabel
+    ? resolveText(list.actionLabel, language)
+    : typeof actionLabel === 'function'
+      ? actionLabel(list)
+      : actionLabel;
+  const headerStyle = getReservationStatusStyle(list.status, theme);
+  const headerStatusLabel = list.statusLabel ? resolveText(list.statusLabel, language) : headerStyle.label;
+
+  const renderRow = (row: ReservationRow) => {
+    const s = getReservationStatusStyle(row.status, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+    const name = resolveText(row.name, language);
+
+    return (
+      <button
+        type="button"
+        className="flex w-full items-center gap-3 py-2.5 text-left"
+        onClick={() => onSelectRow?.(row)}
+      >
+        <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${c.mutedIconBg}`}>
+          <CalendarIcon size={18} color={c.mutedIconColor} />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-sm font-semibold ${c.title}`}>{name}</span>
+            <span className={`shrink-0 text-sm font-bold ${c.price}`}>{row.price}</span>
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            <span className={`truncate text-xs ${c.subtitle}`}>
+              {row.date} · {row.time}
+              {row.duration ? ` · ${row.duration}` : ''}
+            </span>
+            <span className={`shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold ${s.badgeBg} ${s.badgeText}`}>
+              {statusLabel}
+            </span>
+          </div>
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <div className={`rounded-2xl border p-3.5 ${c.surface} ${c.border}`}>
+      <div className="flex items-center gap-3">
+        <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${c.iconBg}`}>
+          <CalendarIcon size={20} color={c.iconColor} />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className={`truncate text-base font-bold ${c.title}`}>{title}</span>
+          {subtitle ? <span className={`truncate text-xs ${c.subtitle}`}>{subtitle}</span> : null}
+        </div>
+
+        <span
+          className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${headerStyle.badgeBg} ${headerStyle.badgeText}`}
+        >
+          {headerStatusLabel}
+        </span>
+      </div>
+
+      <div className={`my-3 h-px ${c.divider}`} />
+
+      {head.map((row, index) => (
+        <Fragment key={row.id}>
+          {index > 0 ? <div className={`h-px ${c.divider}`} /> : null}
+          {renderRow(row)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <Collapsible expanded={expanded}>
+          {rest.map((row) => (
+            <Fragment key={row.id}>
+              <div className={`h-px ${c.divider}`} />
+              {renderRow(row)}
+            </Fragment>
+          ))}
+        </Collapsible>
+      ) : null}
+
+      {hasMore ? (
+        <button
+          type="button"
+          onClick={toggle}
+          className={`mt-1 flex w-full items-center justify-between gap-2 rounded-xl py-2`}
+        >
+          <div className="flex items-center gap-2">
+            <span className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold ${c.iconBg} ${c.iconText}`}>
+              +{rest.length}
+            </span>
+            <span className={`text-sm ${c.subtitle}`}>
+              {expanded
+                ? `Showing all ${reservations.length} requests`
+                : `Showing ${head.length} of ${reservations.length} requests`}
+            </span>
+          </div>
+          <span className={`flex shrink-0 items-center gap-1 text-sm font-semibold ${c.iconText}`}>
+            {expanded ? 'Show less' : 'View all'}
+            <span className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
+              <ChevronIcon size={14} color="currentColor" />
+            </span>
+          </span>
+        </button>
+      ) : null}
+
+      {list.total || action ? (
+        <>
+          <div className={`my-3 h-px ${c.divider}`} />
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex flex-col">
+              {totalLabel ? <span className={`text-xs ${c.subtitle}`}>{totalLabel}</span> : null}
+              {list.total ? <span className={`text-lg font-bold ${c.title}`}>{list.total}</span> : null}
+            </div>
+
+            {action ? (
+              <button
+                type="button"
+                onClick={() => onAction?.(list, ItemAction.Manage)}
+                className="rounded-xl bg-indigo-500 px-4 py-2 text-sm font-semibold text-white"
+              >
+                {action}
+              </button>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/model/chat.model.ts

@@ -14,10 +14,26 @@ export enum ComponentType {
   Event = 'event',
   EventList = 'eventList',
   Info = 'info',
+  Flight = 'flight',
+  FlightList = 'flightList',
+  FlightBoard = 'flightBoard',
+  Order = 'order',
+  Reservation = 'reservation',
+  ReservationList = 'reservationList',
 }
 
 export enum ItemAction {
   Add = 'add',
+  Manage = 'manage',
+  Track = 'track',
+}
+
+export enum FlightStatus {
+  OnTime = 'onTime',
+  Delayed = 'delayed',
+  Boarding = 'boarding',
+  Landed = 'landed',
+  Cancelled = 'cancelled',
 }
 
 export type ActionHandler<TItem = unknown> = (item: TItem, action?: ItemAction) => void;

package/src/features/chat/renderer/renderer.native.tsx

@@ -2,15 +2,31 @@ import { Product } from '../components/product/product.native';
 import { Service } from '../components/service/service.native';
 import { Event } from '../components/event/event.native';
 import { Info } from '../components/info/info.native';
+import { Flight } from '../components/flight/flight.native';
+import { FlightBoard } from '../components/flight-board/flight-board.native';
+import { Order } from '../components/order/order.native';
+import { Reservation } from '../components/reservation/reservation.native';
 import type { ProductItem } from '../components/product/product.model';
 import type { ServiceItem } from '../components/service/service.model';
 import type { EventItem } from '../components/event/event.model';
 import type { InfoItem } from '../components/info/info.model';
+import type { FlightItem } from '../components/flight/flight.model';
+import type { FlightBoardItem } from '../components/flight-board/flight-board.model';
+import type { OrderListItem } from '../components/order/order.model';
+import type { ReservationListItem } from '../components/reservation/reservation.model';
 import { ComponentType } from '../model/chat.model';
 import type { ChatComponentProps } from '../model/chat.model';
 
 export function ChatComponentRenderer<
-  TItem extends ProductItem | ServiceItem | EventItem | InfoItem,
+  TItem extends
+    | ProductItem
+    | ServiceItem
+    | EventItem
+    | InfoItem
+    | FlightItem
+    | FlightBoardItem
+    | OrderListItem
+    | ReservationListItem,
 >({ type, ...rest }: ChatComponentProps<TItem>) {
   switch (type) {
     case ComponentType.Product:
@@ -24,6 +40,18 @@ export function ChatComponentRenderer<
       return <Event type={type} {...(rest as unknown as Omit<ChatComponentProps<EventItem>, 'type'>)} />;
     case ComponentType.Info:
       return <Info type={type} {...(rest as unknown as Omit<ChatComponentProps<InfoItem>, 'type'>)} />;
+    case ComponentType.Flight:
+    case ComponentType.FlightList:
+      return <Flight type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightItem>, 'type'>)} />;
+    case ComponentType.FlightBoard:
+      return <FlightBoard type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightBoardItem>, 'type'>)} />;
+    case ComponentType.Order:
+      return <Order type={type} {...(rest as unknown as Omit<ChatComponentProps<OrderListItem>, 'type'>)} />;
+    case ComponentType.Reservation:
+    case ComponentType.ReservationList:
+      return (
+        <Reservation type={type} {...(rest as unknown as Omit<ChatComponentProps<ReservationListItem>, 'type'>)} />
+      );
     default:
       return null;
   }

package/src/features/chat/renderer/renderer.tsx

@@ -2,15 +2,31 @@ import { Product } from '../components/product/product';
 import { Service } from '../components/service/service';
 import { Event } from '../components/event/event';
 import { Info } from '../components/info/info';
+import { Flight } from '../components/flight/flight';
+import { FlightBoard } from '../components/flight-board/flight-board';
+import { Order } from '../components/order/order';
+import { Reservation } from '../components/reservation/reservation';
 import type { ProductItem } from '../components/product/product.model';
 import type { ServiceItem } from '../components/service/service.model';
 import type { EventItem } from '../components/event/event.model';
 import type { InfoItem } from '../components/info/info.model';
+import type { FlightItem } from '../components/flight/flight.model';
+import type { FlightBoardItem } from '../components/flight-board/flight-board.model';
+import type { OrderListItem } from '../components/order/order.model';
+import type { ReservationListItem } from '../components/reservation/reservation.model';
 import { ComponentType } from '../model/chat.model';
 import type { ChatComponentProps } from '../model/chat.model';
 
 export function ChatComponentRenderer<
-  TItem extends ProductItem | ServiceItem | EventItem | InfoItem,
+  TItem extends
+    | ProductItem
+    | ServiceItem
+    | EventItem
+    | InfoItem
+    | FlightItem
+    | FlightBoardItem
+    | OrderListItem
+    | ReservationListItem,
 >({ type, ...rest }: ChatComponentProps<TItem>) {
   switch (type) {
     case ComponentType.Product:
@@ -24,6 +40,18 @@ export function ChatComponentRenderer<
       return <Event type={type} {...(rest as unknown as Omit<ChatComponentProps<EventItem>, 'type'>)} />;
     case ComponentType.Info:
       return <Info type={type} {...(rest as unknown as Omit<ChatComponentProps<InfoItem>, 'type'>)} />;
+    case ComponentType.Flight:
+    case ComponentType.FlightList:
+      return <Flight type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightItem>, 'type'>)} />;
+    case ComponentType.FlightBoard:
+      return <FlightBoard type={type} {...(rest as unknown as Omit<ChatComponentProps<FlightBoardItem>, 'type'>)} />;
+    case ComponentType.Order:
+      return <Order type={type} {...(rest as unknown as Omit<ChatComponentProps<OrderListItem>, 'type'>)} />;
+    case ComponentType.Reservation:
+    case ComponentType.ReservationList:
+      return (
+        <Reservation type={type} {...(rest as unknown as Omit<ChatComponentProps<ReservationListItem>, 'type'>)} />
+      );
     default:
       return null;
   }