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

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

@@ -0,0 +1,20 @@
+import type { FlightStatus, LocalizedText } from '../../model/chat.model';
+
+export interface Airport {
+  code: string;
+  city: LocalizedText;
+  time: string;
+}
+
+export interface FlightItem {
+  id: number;
+  airline: LocalizedText;
+  flightNumber: string;
+  status?: FlightStatus;
+  statusLabel?: LocalizedText;
+  date?: LocalizedText;
+  terminal?: LocalizedText;
+  from: Airport;
+  to: Airport;
+  duration?: string;
+}

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

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getFlightStatusStyle } from '../../../../utils/flight.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { Collapsible } from '../common/collapsible.native';
+import { PlaneIcon } from '../common/plane-icon.native';
+import { ChevronIcon } from '../common/chevron-icon.native';
+import { FlightStatus, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { FlightItem } from './flight.model';
+
+function FlightCard({
+  item,
+  theme,
+  language,
+  accent,
+  defaultExpanded,
+  onSelect,
+}: {
+  item: FlightItem;
+  theme: Theme;
+  language?: string;
+  accent: boolean;
+  defaultExpanded: boolean;
+  onSelect?: (item: FlightItem) => void;
+}) {
+  const c = getThemeClasses(theme);
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const s = getFlightStatusStyle(item.status ?? FlightStatus.OnTime, theme);
+  const statusLabel = item.statusLabel ? resolveText(item.statusLabel, language) : s.label;
+  const airline = resolveText(item.airline, language);
+  const fromCity = resolveText(item.from.city, language);
+  const toCity = resolveText(item.to.city, language);
+  const subline = item.date
+    ? `${resolveText(item.date, language)}${item.terminal ? ` · ${resolveText(item.terminal, language)}` : ''}`
+    : '';
+  const compact = `${item.from.code} → ${item.to.code} · ${item.from.time}`;
+
+  const iconBg = accent ? c.iconBg : c.mutedIconBg;
+  const iconColor = accent ? c.iconColor : c.mutedIconColor;
+
+  return (
+    <View className={`rounded-2xl border p-3 ${c.surface} ${c.border}`}>
+      <Pressable
+        className="flex-row items-center gap-3"
+        onPress={() => {
+          setExpanded((v) => !v);
+          onSelect?.(item);
+        }}
+      >
+        <View className={`h-11 w-11 items-center justify-center rounded-xl ${iconBg}`}>
+          <PlaneIcon size={20} color={iconColor} />
+        </View>
+
+        <View className="flex-1 gap-0.5">
+          <Text className={`text-base font-bold down-sm:text-sm ${c.title}`} numberOfLines={2}>
+            {airline} · {item.flightNumber}
+          </Text>
+          <Text className={`text-xs ${c.subtitle}`} numberOfLines={1}>
+            {expanded ? subline || compact : compact}
+          </Text>
+        </View>
+
+        <View className={`flex-row items-center gap-1.5 rounded-full px-2.5 py-1 ${s.badgeBg}`}>
+          {s.showDot ? <View className={`h-1.5 w-1.5 rounded-full ${s.dot}`} /> : null}
+          <Text className={`text-xs font-semibold ${s.badgeText}`}>{statusLabel}</Text>
+        </View>
+
+        <View className={expanded ? 'rotate-180' : undefined}>
+          <ChevronIcon size={18} color={c.mutedIconColor} />
+        </View>
+      </Pressable>
+
+      <Collapsible expanded={expanded}>
+        <View className="mt-4 flex-row items-center">
+          <View className="items-start">
+            <Text className={`text-3xl font-bold down-sm:text-2xl ${c.title}`}>{item.from.code}</Text>
+            <Text className={`text-base font-semibold ${c.title}`}>{item.from.time}</Text>
+            <Text className={`text-xs ${c.subtitle}`}>{fromCity}</Text>
+          </View>
+
+          <View className="flex-1 items-center px-3">
+            {item.duration ? <Text className={`mb-1 text-xs ${c.subtitle}`}>{item.duration}</Text> : null}
+            <View className="w-full flex-row items-center">
+              <View className={`h-2 w-2 rounded-full ${s.dot}`} />
+              <View className={`flex-1 border-t border-dashed ${c.dashLine}`} />
+              <View className="rotate-90">
+                <PlaneIcon size={16} color={c.iconColor} />
+              </View>
+              <View className={`flex-1 border-t border-dashed ${c.dashLine}`} />
+              <View className={`h-2 w-2 rounded-full ${s.dot}`} />
+            </View>
+          </View>
+
+          <View className="items-end">
+            <Text className={`text-3xl font-bold down-sm:text-2xl ${c.title}`}>{item.to.code}</Text>
+            <Text className={`text-base font-semibold ${c.title}`}>{item.to.time}</Text>
+            <Text className={`text-xs ${c.subtitle}`}>{toCity}</Text>
+          </View>
+        </View>
+      </Collapsible>
+    </View>
+  );
+}
+
+export function Flight({
+  data,
+  theme = Theme.Dark,
+  language,
+  onSelect,
+}: ChatComponentProps<FlightItem>) {
+  const items = Array.isArray(data) ? data : [data];
+
+  return (
+    <View className="gap-3">
+      {items.map((item, index) => (
+        <FlightCard
+          key={item.id}
+          item={item}
+          theme={theme}
+          language={language}
+          accent={index === 0}
+          defaultExpanded={index === 0}
+          onSelect={onSelect}
+        />
+      ))}
+    </View>
+  );
+}

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

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getFlightStatusStyle } from '../../../../utils/flight.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { Collapsible } from '../common/collapsible';
+import { PlaneIcon } from '../common/plane-icon';
+import { ChevronIcon } from '../common/chevron-icon';
+import { FlightStatus, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { FlightItem } from './flight.model';
+
+function FlightCard({
+  item,
+  theme,
+  language,
+  accent,
+  defaultExpanded,
+  onSelect,
+}: {
+  item: FlightItem;
+  theme: Theme;
+  language?: string;
+  accent: boolean;
+  defaultExpanded: boolean;
+  onSelect?: (item: FlightItem) => void;
+}) {
+  const c = getThemeClasses(theme);
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const s = getFlightStatusStyle(item.status ?? FlightStatus.OnTime, theme);
+  const statusLabel = item.statusLabel ? resolveText(item.statusLabel, language) : s.label;
+  const airline = resolveText(item.airline, language);
+  const fromCity = resolveText(item.from.city, language);
+  const toCity = resolveText(item.to.city, language);
+  const subline = item.date
+    ? `${resolveText(item.date, language)}${item.terminal ? ` · ${resolveText(item.terminal, language)}` : ''}`
+    : '';
+  const compact = `${item.from.code} → ${item.to.code} · ${item.from.time}`;
+
+  const iconBg = accent ? c.iconBg : c.mutedIconBg;
+  const iconColor = accent ? c.iconColor : c.mutedIconColor;
+
+  return (
+    <div className={`rounded-2xl border p-3 ${c.surface} ${c.border}`}>
+      <button
+        type="button"
+        className="flex w-full items-center gap-3 text-left"
+        onClick={() => {
+          setExpanded((v) => !v);
+          onSelect?.(item);
+        }}
+      >
+        <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${iconBg}`}>
+          <PlaneIcon size={20} color={iconColor} />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className={`text-base font-bold down-sm:text-sm ${c.title}`}>
+            {airline} · {item.flightNumber}
+          </span>
+          <span className={`truncate text-xs ${c.subtitle}`}>
+            {expanded ? subline || compact : compact}
+          </span>
+        </div>
+
+        <div className={`flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 ${s.badgeBg}`}>
+          {s.showDot ? <span className={`h-1.5 w-1.5 rounded-full ${s.dot}`} /> : null}
+          <span className={`text-xs font-semibold ${s.badgeText}`}>{statusLabel}</span>
+        </div>
+
+        <span className={`shrink-0 transition-transform ${expanded ? 'rotate-180' : ''}`}>
+          <ChevronIcon size={18} color={c.mutedIconColor} />
+        </span>
+      </button>
+
+      <Collapsible expanded={expanded}>
+        <div className="mt-4 flex items-center">
+          <div className="flex flex-col items-start">
+            <span className={`text-3xl font-bold down-sm:text-2xl ${c.title}`}>{item.from.code}</span>
+            <span className={`text-base font-semibold ${c.title}`}>{item.from.time}</span>
+            <span className={`text-xs ${c.subtitle}`}>{fromCity}</span>
+          </div>
+
+          <div className="flex flex-1 flex-col items-center px-3">
+            {item.duration ? <span className={`mb-1 text-xs ${c.subtitle}`}>{item.duration}</span> : null}
+            <div className="flex w-full items-center">
+              <span className={`h-2 w-2 shrink-0 rounded-full ${s.dot}`} />
+              <span className={`flex-1 border-t border-dashed ${c.dashLine}`} />
+              <span className="rotate-90">
+                <PlaneIcon size={16} color={c.iconColor} />
+              </span>
+              <span className={`flex-1 border-t border-dashed ${c.dashLine}`} />
+              <span className={`h-2 w-2 shrink-0 rounded-full ${s.dot}`} />
+            </div>
+          </div>
+
+          <div className="flex flex-col items-end">
+            <span className={`text-3xl font-bold down-sm:text-2xl ${c.title}`}>{item.to.code}</span>
+            <span className={`text-base font-semibold ${c.title}`}>{item.to.time}</span>
+            <span className={`text-xs ${c.subtitle}`}>{toCity}</span>
+          </div>
+        </div>
+      </Collapsible>
+    </div>
+  );
+}
+
+export function Flight({
+  data,
+  theme = Theme.Dark,
+  language,
+  onSelect,
+}: ChatComponentProps<FlightItem>) {
+  const items = Array.isArray(data) ? data : [data];
+
+  return (
+    <div className="flex flex-col gap-3">
+      {items.map((item, index) => (
+        <FlightCard
+          key={item.id}
+          item={item}
+          theme={theme}
+          language={language}
+          accent={index === 0}
+          defaultExpanded={index === 0}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Flight } from './flight';
+export type { FlightItem, Airport } from './flight.model';

package/src/features/chat/components/flight-board/flight-board.model.ts

@@ -0,0 +1,23 @@
+import type { FlightStatus, LocalizedText } from '../../model/chat.model';
+
+export interface FlightRow {
+  id: number;
+  time: string;
+  city: LocalizedText;
+  code: string;
+  airline: LocalizedText;
+  flightNumber: string;
+  gate?: string;
+  status?: FlightStatus;
+  statusLabel?: LocalizedText;
+  accent?: string;
+}
+
+export interface FlightBoardItem {
+  airport: LocalizedText;
+  code: string;
+  updatedAt?: string;
+  live?: boolean;
+  departures: FlightRow[];
+  arrivals?: FlightRow[];
+}

package/src/features/chat/components/flight-board/flight-board.native.tsx

@@ -0,0 +1,155 @@
+import { Fragment, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getFlightStatusStyle } from '../../../../utils/flight.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible.native';
+import { PlaneIcon } from '../common/plane-icon.native';
+import { ChevronIcon } from '../common/chevron-icon.native';
+import { FlightStatus, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { FlightBoardItem, FlightRow } from './flight-board.model';
+
+const BOARD_COLLAPSED_COUNT = 5;
+type Tab = 'departures' | 'arrivals';
+
+export function FlightBoard({
+  data,
+  theme = Theme.Dark,
+  language,
+  onSelect,
+}: ChatComponentProps<FlightBoardItem>) {
+  const c = getThemeClasses(theme);
+  const board = Array.isArray(data) ? data[0] : data;
+  const [tab, setTab] = useState<Tab>('departures');
+  const onSelectRow = onSelect as ((row: FlightRow) => void) | undefined;
+
+  const arrivals = board?.arrivals ?? [];
+  const hasArrivals = arrivals.length > 0;
+  const rows = tab === 'arrivals' ? arrivals : board?.departures ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(rows, BOARD_COLLAPSED_COUNT);
+
+  if (!board) return null;
+
+  const airport = resolveText(board.airport, language);
+  const noun = tab === 'arrivals' ? 'arrivals' : 'departures';
+
+  const renderRow = (row: FlightRow) => {
+    const s = getFlightStatusStyle(row.status ?? FlightStatus.OnTime, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+    const city = resolveText(row.city, language);
+    const airline = resolveText(row.airline, language);
+
+    return (
+      <Pressable className="flex-row items-center gap-2 py-2.5" onPress={() => onSelectRow?.(row)}>
+        <Text className={`w-12 text-sm font-bold ${c.title}`}>{row.time}</Text>
+
+        <View className="flex-1 flex-row items-center gap-2">
+          <View
+            className="h-2 w-2 rounded-full"
+            style={{ backgroundColor: row.accent ?? c.iconColor }}
+          />
+          <View className="flex-1">
+            <Text className={`text-sm font-semibold ${c.title}`} numberOfLines={1}>
+              {city} · {row.code}
+            </Text>
+            <Text className={`text-xs ${c.subtitle}`} numberOfLines={1}>
+              {airline} · {row.flightNumber}
+            </Text>
+          </View>
+        </View>
+
+        <Text className={`w-10 text-center text-sm font-semibold ${c.title}`}>{row.gate ?? '—'}</Text>
+
+        <View className={`items-end rounded-full px-2 py-1 ${s.badgeBg}`}>
+          <Text className={`text-xs font-semibold ${s.badgeText}`}>{statusLabel}</Text>
+        </View>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className={`rounded-2xl border p-3 ${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}`}>
+          <PlaneIcon size={20} color={c.iconColor} />
+        </View>
+
+        <View className="flex-1">
+          <Text className={`text-base font-bold ${c.title}`} numberOfLines={1}>
+            {airport} · {board.code}
+          </Text>
+          <View className="flex-row items-center gap-1.5">
+            {board.live ? <View className="h-1.5 w-1.5 rounded-full bg-emerald-400" /> : null}
+            <Text className={`text-xs ${c.subtitle}`} numberOfLines={1}>
+              {board.live ? 'Live' : 'Schedule'}
+              {board.updatedAt ? ` · updated ${board.updatedAt}` : ''}
+            </Text>
+          </View>
+        </View>
+
+        {hasArrivals ? (
+          <View className="flex-row rounded-full bg-black/20 p-0.5">
+            {(['departures', 'arrivals'] as Tab[]).map((t) => (
+              <Pressable
+                key={t}
+                onPress={() => setTab(t)}
+                className={`rounded-full px-3 py-1 ${tab === t ? 'bg-indigo-500' : ''}`}
+              >
+                <Text className={`text-xs font-semibold ${tab === t ? 'text-white' : c.subtitle}`}>
+                  {t === 'arrivals' ? 'Arrivals' : 'Departures'}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        ) : null}
+      </View>
+
+      <View className={`my-3 h-px ${c.divider}`} />
+
+      <View className="flex-row items-center gap-2 pb-1">
+        <Text className={`w-12 text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>Time</Text>
+        <Text className={`flex-1 text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>
+          Flight · Destination
+        </Text>
+        <Text className={`w-10 text-center text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>
+          Gate
+        </Text>
+        <Text className={`text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>Status</Text>
+      </View>
+
+      {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-2 flex-row items-center justify-center gap-1.5 rounded-xl border py-2 ${c.actionBorder}`}
+        >
+          <Text className={`text-sm font-medium ${c.actionText}`}>
+            {expanded ? 'Show less' : `View all ${noun}`}
+          </Text>
+          <View className={expanded ? 'rotate-180' : undefined}>
+            <ChevronIcon size={16} color={c.mutedIconColor} />
+          </View>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/features/chat/components/flight-board/flight-board.tsx

@@ -0,0 +1,160 @@
+import { Fragment, useState } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { getFlightStatusStyle } from '../../../../utils/flight.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible';
+import { PlaneIcon } from '../common/plane-icon';
+import { ChevronIcon } from '../common/chevron-icon';
+import { FlightStatus, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { FlightBoardItem, FlightRow } from './flight-board.model';
+
+const BOARD_COLLAPSED_COUNT = 5;
+type Tab = 'departures' | 'arrivals';
+
+export function FlightBoard({
+  data,
+  theme = Theme.Dark,
+  language,
+  onSelect,
+}: ChatComponentProps<FlightBoardItem>) {
+  const c = getThemeClasses(theme);
+  const board = Array.isArray(data) ? data[0] : data;
+  const [tab, setTab] = useState<Tab>('departures');
+  const onSelectRow = onSelect as ((row: FlightRow) => void) | undefined;
+
+  const arrivals = board?.arrivals ?? [];
+  const hasArrivals = arrivals.length > 0;
+  const rows = tab === 'arrivals' ? arrivals : board?.departures ?? [];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(rows, BOARD_COLLAPSED_COUNT);
+
+  if (!board) return null;
+
+  const airport = resolveText(board.airport, language);
+  const noun = tab === 'arrivals' ? 'arrivals' : 'departures';
+
+  const renderRow = (row: FlightRow) => {
+    const s = getFlightStatusStyle(row.status ?? FlightStatus.OnTime, theme);
+    const statusLabel = row.statusLabel ? resolveText(row.statusLabel, language) : s.label;
+    const city = resolveText(row.city, language);
+    const airline = resolveText(row.airline, language);
+
+    return (
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 py-2.5 text-left"
+        onClick={() => onSelectRow?.(row)}
+      >
+        <span className={`w-12 shrink-0 text-sm font-bold ${c.title}`}>{row.time}</span>
+
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          <span
+            className="h-2 w-2 shrink-0 rounded-full"
+            style={{ backgroundColor: row.accent ?? c.iconColor }}
+          />
+          <span className="flex min-w-0 flex-1 flex-col">
+            <span className={`truncate text-sm font-semibold ${c.title}`}>
+              {city} · {row.code}
+            </span>
+            <span className={`truncate text-xs ${c.subtitle}`}>
+              {airline} · {row.flightNumber}
+            </span>
+          </span>
+        </span>
+
+        <span className={`w-10 shrink-0 text-center text-sm font-semibold ${c.title}`}>{row.gate ?? '—'}</span>
+
+        <span className={`shrink-0 rounded-full px-2 py-1 text-xs font-semibold ${s.badgeBg} ${s.badgeText}`}>
+          {statusLabel}
+        </span>
+      </button>
+    );
+  };
+
+  return (
+    <div className={`rounded-2xl border p-3 ${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}`}>
+          <PlaneIcon 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}`}>
+            {airport} · {board.code}
+          </span>
+          <span className="flex items-center gap-1.5">
+            {board.live ? <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" /> : null}
+            <span className={`truncate text-xs ${c.subtitle}`}>
+              {board.live ? 'Live' : 'Schedule'}
+              {board.updatedAt ? ` · updated ${board.updatedAt}` : ''}
+            </span>
+          </span>
+        </div>
+
+        {hasArrivals ? (
+          <div className="flex shrink-0 rounded-full bg-black/20 p-0.5">
+            {(['departures', 'arrivals'] as Tab[]).map((t) => (
+              <button
+                key={t}
+                type="button"
+                onClick={() => setTab(t)}
+                className={`rounded-full px-3 py-1 text-xs font-semibold ${
+                  tab === t ? 'bg-indigo-500 text-white' : c.subtitle
+                }`}
+              >
+                {t === 'arrivals' ? 'Arrivals' : 'Departures'}
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <div className={`my-3 h-px ${c.divider}`} />
+
+      <div className="flex items-center gap-2 pb-1">
+        <span className={`w-12 shrink-0 text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>
+          Time
+        </span>
+        <span className={`flex-1 text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>
+          Flight · Destination
+        </span>
+        <span className={`w-10 shrink-0 text-center text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>
+          Gate
+        </span>
+        <span className={`text-[10px] font-semibold uppercase tracking-wide ${c.subtitle}`}>Status</span>
+      </div>
+
+      {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-2 flex w-full items-center justify-center gap-1.5 rounded-xl border py-2 text-sm font-medium ${c.actionBorder} ${c.actionText}`}
+        >
+          {expanded ? 'Show less' : `View all ${noun}`}
+          <span className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
+            <ChevronIcon size={16} color={c.mutedIconColor} />
+          </span>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/components/flight-board/index.ts

@@ -0,0 +1,2 @@
+export { FlightBoard } from './flight-board';
+export type { FlightBoardItem, FlightRow } from './flight-board.model';

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

@@ -3,4 +3,7 @@ import type { LocalizedText } from '../../model/chat.model';
 export interface InfoItem {
   name: LocalizedText;
   description: LocalizedText;
+  kicker?: LocalizedText;
+  image?: string;
+  actionLabel?: LocalizedText;
 }