stream-chat-react-native-core 9.12.1 → 9.14.0

package/src/ai-components/conversation/entries.ts

@@ -0,0 +1,177 @@
+import type { AIMessage, AIPendingMessage } from '../conversation-state/types';
+
+import type { AIUIDocument } from '../generative-ui/AIUIDocument';
+import type { AIMessageAttachmentData } from '../message/AIMessageAttachment';
+import { isToolCallFinished } from '../message-parts/parseMessageParts';
+
+/** A row of the conversation: a message, or a message the person sent that is on its way. */
+export type AIConversationEntry = {
+  /** The message's id, or, for the copy of a message that was on its way, that message's. */
+  id: string;
+  isFromUser: boolean;
+  /** Whether it is a reply that ends the conversation. */
+  isLatestReply: boolean;
+  /** The message, or `undefined` for one on its way. */
+  message?: AIMessage;
+  /** The message on its way, until its copy arrives. */
+  pending?: AIPendingMessage;
+  /** What the person sent with a message on its way, which its copy shows rather than load it again. */
+  sentAttachments: AIMessageAttachmentData[];
+};
+
+/** The person's message and the replies to it. */
+export type AIConversationTurn = { entries: AIConversationEntry[]; id: string };
+
+/** Whether a reply's generated UI shows, such as `AIUIHost.canShow`. */
+export type AIConversationCanShowUI = (document: AIUIDocument) => boolean;
+
+const showsNoUI: AIConversationCanShowUI = () => false;
+
+// A reply the agent has started but that has nothing to show yet: no text, steps or attachments,
+// and no UI that `canShowUI` says shows.
+const showsNothing = (message: AIMessage, canShowUI: AIConversationCanShowUI) =>
+  message.role !== 'user' &&
+  message.text === '' &&
+  !message.parts?.length &&
+  !message.attachments?.length &&
+  !(message.uiDocument && canShowUI(message.uiDocument));
+
+// Whether a step is over: a round of reasoning that stopped streaming, or a call that finished.
+// A step of a kind this SDK doesn't know counts as over, since it can't say otherwise.
+const isStepOver = ({ reasoning, toolCall }: NonNullable<AIMessage['parts']>[number]) =>
+  reasoning
+    ? reasoning.status !== 'streaming'
+    : toolCall
+      ? isToolCallFinished(toolCall.status)
+      : true;
+
+/**
+ * Whether the reply is being written, took steps that are all over, and shows no UI: once its
+ * answer stops growing, the agent is thinking again, between its steps. An agent's backend can
+ * write a round of reasoning as a step only once it is done, so nothing would show meanwhile. A
+ * step still going, such as a call waiting for the person, shows itself instead.
+ */
+export const hasFinishedSteps = (
+  message: AIMessage | undefined,
+  canShowUI: AIConversationCanShowUI = showsNoUI,
+): message is AIMessage =>
+  !!message &&
+  message.role !== 'user' &&
+  !!message.isGenerating &&
+  !!message.parts?.length &&
+  message.parts.every(isStepOver) &&
+  !(message.uiDocument && canShowUI(message.uiDocument));
+
+/** Groups the rows into turns, each starting with one of the person's messages. */
+export const turnsOf = (entries: AIConversationEntry[]) =>
+  entries.reduce<AIConversationTurn[]>((turns, entry) => {
+    const last = turns[turns.length - 1];
+    if (!last || entry.isFromUser) turns.push({ entries: [entry], id: entry.id });
+    else last.entries.push(entry);
+    return turns;
+  }, []);
+
+/**
+ * Follows a message the person sent until its copy arrives in the messages, so the copy takes
+ * over its row (and its key) without a flicker, and tells whether the agent is surely about to
+ * answer.
+ */
+export class AIPendingMessageTracker {
+  // The person's messages each pending message's copy cannot be: those there were when it was
+  // first seen, and those that arrived since without being its copy, such as older ones.
+  private seen = new Map<string, Set<string>>();
+  // The pending message each copy took over, by the copy's id.
+  private copies = new Map<string, AIPendingMessage>();
+  // The pending message of the last update, whose copy can arrive in the update that stops
+  // passing it.
+  private lastPending?: AIPendingMessage;
+
+  // The rows of a conversation: its messages, apart from replies with nothing to show yet, and
+  // a message on its way until its copy arrives. A reply's UI shows when `canShowUI` says.
+  entries(
+    messages: AIMessage[],
+    pending?: AIPendingMessage | null,
+    canShowUI: AIConversationCanShowUI = showsNoUI,
+  ): AIConversationEntry[] {
+    let showsPending = !!pending;
+    // A copy that arrives in the update that stops passing its pending message still takes over
+    // its row. Only then: a message sent later is not the copy of one that failed.
+    const awaited = pending ?? this.lastPending;
+    if (awaited) {
+      const sent = messages.filter((message) => message.role === 'user');
+      const ids = new Set(sent.map((message) => message.id));
+      const known = this.seen.get(awaited.id) ?? ids;
+      const matched = [...this.copies].find(
+        ([copyId, original]) => original.id === awaited.id && ids.has(copyId),
+      )?.[0];
+      const copy = matched ?? this.copyOf(awaited, sent, known);
+      if (copy !== undefined) {
+        if (!this.copies.has(copy)) this.copies.set(copy, awaited);
+        showsPending = false;
+      } else {
+        this.seen.set(awaited.id, new Set([...known, ...ids]));
+      }
+    }
+    this.lastPending = pending ?? undefined;
+
+    const entries: AIConversationEntry[] = messages
+      .filter((message) => !showsNothing(message, canShowUI))
+      .map((message) => {
+        const taken = this.copies.get(message.id);
+        return {
+          id: taken?.id ?? message.id,
+          isFromUser: message.role === 'user',
+          isLatestReply: false,
+          message,
+          sentAttachments: taken?.attachments ?? [],
+        };
+      });
+    if (showsPending && pending) {
+      entries.push({
+        id: pending.id,
+        isFromUser: true,
+        isLatestReply: false,
+        pending,
+        sentAttachments: [],
+      });
+    }
+    const last = entries[entries.length - 1];
+    if (last && !last.isFromUser) last.isLatestReply = true;
+    return entries;
+  }
+
+  // The copy of a message that was on its way: the person's message with its id, when the app
+  // knew it. Otherwise their first after those known, which older messages loading above cannot
+  // be. With none of theirs known, it is their latest, when that is the only new one or says the
+  // same.
+  private copyOf(pending: AIPendingMessage, sent: AIMessage[], known: Set<string>) {
+    const ids = sent.map((message) => message.id);
+    if (ids.includes(pending.id)) return pending.id;
+    let lastKnown = -1;
+    ids.forEach((id, index) => {
+      if (known.has(id)) lastKnown = index;
+    });
+    if (lastKnown >= 0) return ids[lastKnown + 1];
+    const fresh = sent.filter((message) => !known.has(message.id));
+    const latest = fresh[fresh.length - 1];
+    if (!latest || (fresh.length !== 1 && latest.text !== pending.text)) return undefined;
+    return latest.id;
+  }
+
+  // Whether the latest message is surely waiting for a reply that shows nothing yet: it is on its
+  // way, it is the copy of the one on its way, or its reply is being written but shows nothing.
+  // Call it after `entries`, which matches the copies.
+  isAwaitingReply(
+    messages: AIMessage[],
+    pending?: AIPendingMessage | null,
+    canShowUI: AIConversationCanShowUI = showsNoUI,
+  ) {
+    const last = messages[messages.length - 1];
+    if (last && last.role !== 'user' && last.isGenerating && showsNothing(last, canShowUI))
+      return true;
+    if (!pending) return false;
+    const copy = [...this.copies].find(([, original]) => original.id === pending.id)?.[0];
+    if (copy === undefined) return true;
+    return last?.id === copy;
+  }
+}

package/src/ai-components/conversation/index.ts

@@ -0,0 +1,2 @@
+export * from './AIConversation';
+export type { AIConversationCanShowUI, AIConversationEntry, AIConversationTurn } from './entries';

package/src/ai-components/conversation/list/AIChatList.tsx

@@ -0,0 +1,227 @@
+import React, { type ReactNode, useMemo, useRef } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
+import Animated, { Easing, Keyframe, useAnimatedStyle } from 'react-native-reanimated';
+
+import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
+import type { LegendListRef, LegendListRenderItemProps } from '@legendapp/list/react-native';
+
+import { useChatListController } from './useChatListController';
+import { keyboardOverlapOf } from './useKeyboardOverlap';
+
+import { useAITranslation, useTheme } from '../../contexts';
+import { useAIIcons } from '../../icons';
+import { useBottomSafeArea } from '../../internal/hooks/useBottomSafeArea';
+import { primitives } from '../../internal/tokens';
+
+export type AIChatListProps<T> = {
+  /** The key of the row to pin to the top of what is visible, such as the latest question's. */
+  anchorKey: string | undefined;
+  data: T[];
+  getItemType: (item: T) => string;
+  keyExtractor: (item: T) => string;
+  renderItem: (props: LegendListRenderItemProps<T>) => ReactNode;
+  /** The room for a composer floating over the bottom of the list. */
+  bottomInset?: number;
+  /** What shows while there are no rows, centered. */
+  emptyContent?: ReactNode;
+  /**
+   * How far above the bottom of the screen the composer sits, such as above a tab bar: the
+   * keyboard covers the list only as far as it rises past that. Defaults to the bottom safe area.
+   */
+  keyboardOffset?: number;
+  /** Loads the rows before the first one. `undefined` once there are none left. */
+  loadOlderMessages?: () => Promise<void> | void;
+  testID?: string;
+};
+
+const LoadingOlder = () => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, conversation },
+  } = useTheme();
+  return (
+    <View
+      accessibilityLabel={t('Loading older messages')}
+      accessibilityRole='progressbar'
+      accessible
+      style={[styles.loadingOlder, conversation?.loadingOlder]}
+    >
+      <ActivityIndicator color={conversation?.loadingIndicator ?? colors.grey} />
+    </View>
+  );
+};
+
+// How far past what is visible rows are laid out, each way. Replies run from a line to several
+// screens, so a row the list reuses for another is placed by an estimate until it is measured: far
+// enough out, that happens off screen even in a fast fling, rather than as rows briefly showing
+// what they held before or overlapping. LegendList's default is 250.
+const DRAW_DISTANCE = 1000;
+
+const SCROLL_BUTTON_IN = new Keyframe({
+  0: { opacity: 0, transform: [{ scale: 0.8 }] },
+  100: { easing: Easing.inOut(Easing.ease), opacity: 1, transform: [{ scale: 1 }] },
+}).duration(200);
+const SCROLL_BUTTON_OUT = new Keyframe({
+  0: { opacity: 1, transform: [{ scale: 1 }] },
+  100: { easing: Easing.inOut(Easing.ease), opacity: 0, transform: [{ scale: 0.8 }] },
+}).duration(200);
+
+const ScrollToLatestButton = ({ onPress }: { onPress: () => void }) => {
+  const { t } = useAITranslation();
+  const {
+    theme: { colors, conversation },
+  } = useTheme();
+  const { ArrowDown } = useAIIcons();
+  return (
+    <Pressable
+      accessibilityLabel={t('Scroll to latest')}
+      accessibilityRole='button'
+      hitSlop={4}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.scrollButton,
+        {
+          backgroundColor: conversation?.scrollButtonBackground ?? colors.white,
+          borderColor: conversation?.scrollButtonBorder ?? colors.grey_gainsboro,
+          opacity: pressed ? 0.7 : 1,
+        },
+        conversation?.scrollButton,
+      ]}
+    >
+      <ArrowDown color={conversation?.scrollButtonIcon ?? colors.black} size={20} />
+    </Pressable>
+  );
+};
+
+/**
+ * The list of a chat with an agent: virtualised on Reanimated LegendList, reusing the views of
+ * rows scrolled out of sight. It pins `anchorKey`'s row to the top of what is visible, opens at the
+ * end, loads older rows as the person scrolls to the start, and offers a button back to the latest
+ * row when the end is out of view. What the rows are is the caller's.
+ */
+export const AIChatList = <T,>({
+  anchorKey,
+  bottomInset = 0,
+  data,
+  emptyContent,
+  getItemType,
+  keyboardOffset: keyboardOffsetProp,
+  keyExtractor,
+  loadOlderMessages,
+  renderItem,
+  testID,
+}: AIChatListProps<T>) => {
+  const {
+    theme: { conversation },
+  } = useTheme();
+  const listRef = useRef<LegendListRef>(null);
+  const isEmpty = data.length === 0;
+  const { isEndInView, keyboard, keyboardOffset, listProps, loadsOlder, scrollToEnd } =
+    useChatListController({
+      anchorKey,
+      bottomInset,
+      data,
+      keyExtractor,
+      listRef,
+      loadOlderMessages: isEmpty ? undefined : loadOlderMessages,
+    });
+
+  const contentContainerStyle = useMemo(
+    () =>
+      StyleSheet.flatten([
+        { paddingBottom: primitives.spacingMd + bottomInset },
+        conversation?.content,
+      ]),
+    [bottomInset, conversation?.content],
+  );
+
+  const bottomSafeArea = useBottomSafeArea();
+  const offset = keyboardOffsetProp ?? bottomSafeArea;
+  keyboardOffset.current = offset;
+
+  // The button rides the keyboard, so it stays in sight above it.
+  const buttonLift = useAnimatedStyle(() => ({
+    transform: [{ translateY: -keyboardOverlapOf(keyboard.value, offset) }],
+  }));
+  // What shows while there are no rows stays centered in what the keyboard leaves of the list.
+  const emptyLift = useAnimatedStyle(() => ({
+    paddingBottom: bottomInset + keyboardOverlapOf(keyboard.value, offset),
+  }));
+
+  return (
+    <View style={[styles.container, conversation?.container]} testID={testID}>
+      {/* Mounted even while there are no rows: the list follows the keyboard only from its next
+          move, so one mounted while the keyboard is up would leave the first turn under it. The
+          keyboard comes up over the list, which makes room for it below the latest turn: the room
+          the pinned question leaves takes it first. */}
+      <KeyboardAwareLegendList
+        {...listProps}
+        contentContainerStyle={contentContainerStyle}
+        data={data}
+        drawDistance={DRAW_DISTANCE}
+        getItemType={getItemType}
+        initialScrollAtEnd
+        keyboardOffset={offset}
+        keyboardShouldPersistTaps='handled'
+        keyExtractor={keyExtractor}
+        ListHeaderComponent={loadsOlder ? LoadingOlder : null}
+        maintainVisibleContentPosition
+        recycleItems
+        ref={listRef}
+        renderItem={renderItem}
+        testID={testID && `${testID}-list`}
+      />
+      {isEmpty ? (
+        <Animated.View
+          pointerEvents='box-none'
+          style={[styles.empty, emptyLift, conversation?.empty]}
+          testID={testID && `${testID}-empty`}
+        >
+          {emptyContent}
+        </Animated.View>
+      ) : null}
+      {!isEndInView && !isEmpty ? (
+        <Animated.View
+          pointerEvents='box-none'
+          style={[
+            styles.scrollButtonContainer,
+            { bottom: bottomInset + primitives.spacingXs },
+            buttonLift,
+          ]}
+        >
+          <Animated.View entering={SCROLL_BUTTON_IN} exiting={SCROLL_BUTTON_OUT}>
+            <ScrollToLatestButton onPress={scrollToEnd} />
+          </Animated.View>
+        </Animated.View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  empty: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  loadingOlder: { alignItems: 'center', paddingTop: primitives.spacingMd },
+  scrollButton: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    elevation: 2,
+    height: 40,
+    justifyContent: 'center',
+    shadowColor: '#000000',
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.14,
+    shadowRadius: 3,
+    width: 40,
+  },
+  scrollButtonContainer: { alignItems: 'center', left: 0, position: 'absolute', right: 0 },
+});

package/src/ai-components/conversation/list/useChatListController.ts

@@ -0,0 +1,91 @@
+import { type RefObject, useCallback, useRef } from 'react';
+
+import { useKeyboardScrollToEnd } from '@legendapp/list/keyboard';
+import type { LegendListRef } from '@legendapp/list/react-native';
+
+import { useEndInView } from './useEndInView';
+import { useKeyboardFrame } from './useKeyboardOverlap';
+import { useLoadOlder } from './useLoadOlder';
+import { usePinnedAnchor } from './usePinnedAnchor';
+
+import { useReduceMotion } from '../../voice-visualization/useReduceMotion';
+
+export type ChatListControllerOptions<T> = {
+  /** The key of the row to pin to the top, such as the latest question's. */
+  anchorKey: string | undefined;
+  /** The room for a composer floating over the bottom of the list. */
+  bottomInset: number;
+  data: readonly T[];
+  keyExtractor: (item: T) => string;
+  listRef: RefObject<LegendListRef | null>;
+  /** Loads the rows before the first one. `undefined` once there are none left. */
+  loadOlderMessages?: () => Promise<void> | void;
+};
+
+/**
+ * How a chat list behaves, apart from how it looks: the row to pin, whether the end is in view,
+ * and loading older rows. Renders nothing: `listProps` go on a LegendList given `listRef`, and
+ * the rest is for the views around it. Any LegendList that keeps `anchoredEndSpace` works.
+ */
+export const useChatListController = <T>({
+  anchorKey,
+  bottomInset,
+  data,
+  keyExtractor,
+  listRef,
+  loadOlderMessages,
+}: ChatListControllerOptions<T>) => {
+  const reduceMotion = useReduceMotion();
+  // The list's positions leave its header out: the spinner while older messages load.
+  const headerSize = useRef(0);
+
+  // How far above the bottom of the screen the list ends, which the keyboard reaches past.
+  const keyboardOffset = useRef(0);
+  const checkEnd = useRef<() => void>(undefined);
+  const keyboard = useKeyboardFrame(() => checkEnd.current?.());
+  const { isEndInView, scheduleCheckEnd } = useEndInView({
+    bottomInset,
+    headerSize,
+    keyboard,
+    keyboardOffset,
+    listRef,
+  });
+  checkEnd.current = scheduleCheckEnd;
+  const { anchoredEndSpace, onMetricsChange } = usePinnedAnchor({
+    anchorKey,
+    data,
+    headerSize,
+    keyExtractor,
+    listRef,
+    onAnchorLayout: scheduleCheckEnd,
+  });
+  const loadOlder = useLoadOlder({ listRef, loadOlderMessages });
+
+  // Holds the keyboard's own adjustments of the list still while it scrolls, so they don't stop it
+  // short of the end above the keyboard.
+  const { freeze, scrollMessageToEnd } = useKeyboardScrollToEnd({ listRef });
+  const scrollToEnd = useCallback(() => {
+    void scrollMessageToEnd({ animated: !reduceMotion, closeKeyboard: false });
+  }, [reduceMotion, scrollMessageToEnd]);
+
+  return {
+    isEndInView,
+    /** The keyboard, for views that ride it, such as the button back to the latest row. */
+    keyboard,
+    /** How far above the bottom of the screen the list ends; the list's view sets it. */
+    keyboardOffset,
+    /** Whether older rows load as the list nears its start, so it shows that they are loading. */
+    loadsOlder: !!loadOlder,
+    listProps: {
+      anchoredEndSpace,
+      freeze,
+      // The list growing or shrinking, such as under a taller composer, can bring its end in or out of view.
+      onLayout: scheduleCheckEnd,
+      onItemSizeChanged: scheduleCheckEnd,
+      onMetricsChange,
+      onScroll: scheduleCheckEnd,
+      ...loadOlder,
+    },
+    scrollToEnd,
+  };
+};

package/src/ai-components/conversation/list/useEndInView.ts

@@ -0,0 +1,61 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import type { LegendListRef } from '@legendapp/list/react-native';
+
+import { type KeyboardFrame, keyboardOverlapOf } from './useKeyboardOverlap';
+
+// How far from the end still counts as at the end.
+const END_SLACK = 32;
+
+export type UseEndInViewOptions = {
+  /** The room for a composer floating over the bottom of the list, which is not in view. */
+  bottomInset: number;
+  /** The height of the list's header, which its positions leave out. */
+  headerSize: RefObject<number>;
+  /** The keyboard, which covers the bottom of the list by as much as it reaches over it. */
+  keyboard: SharedValue<KeyboardFrame>;
+  /** How far above the bottom of the screen the list ends. */
+  keyboardOffset: RefObject<number>;
+  listRef: RefObject<LegendListRef | null>;
+};
+
+/**
+ * Whether the end of the last row's content is in view: not the room the anchored latest turn
+ * leaves under a short reply, nor the room for the floating composer. Call `scheduleCheckEnd`
+ * whenever that may have changed: a scroll, or a row changing size without one, such as an answer
+ * typing out, or the keyboard moving. It checks once a frame at most.
+ */
+export const useEndInView = ({
+  bottomInset,
+  headerSize,
+  keyboard,
+  keyboardOffset,
+  listRef,
+}: UseEndInViewOptions) => {
+  const [isEndInView, setIsEndInView] = useState(true);
+  const bottomInsetRef = useRef(bottomInset);
+  bottomInsetRef.current = bottomInset;
+  const checkEnd = useCallback(() => {
+    const state = listRef.current?.getState();
+    const last = (state?.data.length ?? 0) - 1;
+    if (!state || last < 0) return;
+    const end = headerSize.current + state.positionAtIndex(last) + state.sizeAtIndex(last);
+    const covered = keyboardOverlapOf(keyboard.value, keyboardOffset.current);
+    const visibleEnd = state.scroll + state.scrollLength - bottomInsetRef.current - covered;
+    setIsEndInView(end <= visibleEnd + END_SLACK);
+  }, [headerSize, keyboard, keyboardOffset, listRef]);
+
+  const checkFrame = useRef<number | undefined>(undefined);
+  const scheduleCheckEnd = useCallback(() => {
+    if (checkFrame.current !== undefined) return;
+    checkFrame.current = requestAnimationFrame(() => {
+      checkFrame.current = undefined;
+      checkEnd();
+    });
+  }, [checkEnd]);
+  useEffect(() => () => cancelAnimationFrame(checkFrame.current ?? 0), []);
+
+  return { isEndInView, scheduleCheckEnd };
+};

package/src/ai-components/conversation/list/useKeyboardOverlap.ts

@@ -0,0 +1,52 @@
+import { useRef } from 'react';
+import { runOnJS, type SharedValue, useSharedValue } from 'react-native-reanimated';
+
+import { keyboardHeight, useKeyboardHandler } from '../../internal/keyboard';
+
+export type KeyboardFrame = { height: number; progress: number };
+
+/**
+ * How far the keyboard reaches over a view that ends `offset` above the bottom of the screen, as
+ * `KeyboardAwareLegendList` reckons it: the keyboard's height less the offset, scaled by how far
+ * the keyboard is open. In a worklet or on the JS thread.
+ */
+export const keyboardOverlapOf = (keyboard: KeyboardFrame, offset: number) => {
+  'worklet';
+  return Math.max(0, keyboard.height - offset * keyboard.progress);
+};
+
+/**
+ * The keyboard's height and how far it is open, as it moves. `onSettled` runs on the JS thread
+ * once it has finished moving.
+ */
+export const useKeyboardFrame = (onSettled?: () => void): SharedValue<KeyboardFrame> => {
+  const initial = keyboardHeight();
+  const keyboard = useSharedValue<KeyboardFrame>({
+    height: initial,
+    progress: initial > 0 ? 1 : 0,
+  });
+  const settled = useRef(onSettled);
+  settled.current = onSettled;
+  const reportSettled = () => settled.current?.();
+
+  useKeyboardHandler(
+    {
+      onEnd: (event) => {
+        'worklet';
+        keyboard.value = { height: event.height, progress: event.progress };
+        runOnJS(reportSettled)();
+      },
+      onInteractive: (event) => {
+        'worklet';
+        keyboard.value = { height: event.height, progress: event.progress };
+      },
+      onMove: (event) => {
+        'worklet';
+        keyboard.value = { height: event.height, progress: event.progress };
+      },
+    },
+    [],
+  );
+
+  return keyboard;
+};