aix 0.0.15 → 0.1.0

package/src/fade-in/index.tsx

@@ -0,0 +1,97 @@
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import { createUsePool } from './createUsePool'
+import { createUseStaggered } from './createUseStaggered'
+import Animated from 'react-native-reanimated'
+import { Children, memo, useState } from 'react'
+
+const useIsAnimatedInPool = createUsePool()
+const useStaggeredAnimation = createUseStaggered(32)
+
+function FadeIn({
+  children,
+  onFadedIn,
+  Component = Animated.Text as any,
+}: {
+  children: React.ReactNode
+  onFadedIn: () => void
+  Component?: React.ComponentType<any>
+}) {
+  const progress = useSharedValue(0)
+
+  const startAnimation = () => {
+    progress.set(withTiming(1, { duration: 500 }))
+    setTimeout(onFadedIn, 500)
+  }
+
+  useStaggeredAnimation(startAnimation)
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.get(),
+  }))
+
+  return <Component style={animatedStyle}>{children}</Component>
+}
+
+const AnimatedFadeInText = memo(function AnimatedFadeInText(props: {
+  text: string
+}) {
+  const chunks = props.text.split(' ')
+
+  return chunks.map((chunk, i) => {
+    if (i < chunks.length - 1) chunk += ' '
+
+    return <TextFadeInStaggered key={i} text={chunk} />
+  })
+})
+
+export const TextFadeInStaggeredIfStreaming = memo(
+  function TextFadeInStaggeredIfStreaming({
+    children: childrenProp,
+    disabled,
+  }: {
+    children: React.ReactNode
+    disabled: boolean
+  }) {
+    const [enabled] = useState(!disabled)
+
+    let children = childrenProp
+    if (enabled && children) {
+      if (Array.isArray(children)) {
+        children = Children.map(children, (child, i) =>
+          typeof child === 'string' ? (
+            <AnimatedFadeInText key={i} text={child} />
+          ) : (
+            child
+          )
+        )
+      } else if (typeof children === 'string') {
+        children = <AnimatedFadeInText text={children} />
+      }
+    }
+
+    return children
+  }
+)
+
+const TextFadeInStaggered = memo(function TextFadeInStaggered({
+  text,
+}: {
+  text: string
+}) {
+  const { isActive, evict } = useIsAnimatedInPool()
+  return isActive ? (
+    <FadeIn
+      onFadedIn={() => {
+        evict()
+      }}
+    >
+      {text}
+    </FadeIn>
+  ) : (
+    text
+  )
+})

package/src/footer.tsx

@@ -0,0 +1,30 @@
+import { getHostComponent } from 'react-native-nitro-modules'
+import AixComposerConfig from '../nitrogen/generated/shared/json/AixComposerConfig.json'
+import type { AixComposerProps } from './views/aix.nitro'
+import { StyleSheet } from 'react-native'
+
+const AixFooterInternal = getHostComponent<AixComposerProps, {}>(
+  'AixComposer',
+  () => AixComposerConfig
+)
+
+export function AixFooter(
+  props: React.ComponentProps<typeof AixFooterInternal>
+) {
+  if (__DEV__) {
+    const flat = StyleSheet.flatten(props.style)
+    const broken = Object.keys({
+      paddingBottom: flat.paddingBottom,
+      padding: flat.padding,
+    }).filter((key) => flat[key as keyof typeof flat] !== undefined)
+
+    if (broken.length) {
+      console.error(
+        `<AixFooter /> You used ${broken.join(
+          ', '
+        )} in the style prop. Vertical padding is not supported on AixFooter directly. Please apply it to a child view instead.`
+      )
+    }
+  }
+  return <AixFooterInternal {...props} />
+}

package/src/index.ts

@@ -1,16 +1,20 @@
-export { DeferredIterable } from "./deferredIterable";
-export { restToIterable } from "./restToIterable";
-export { merge } from "./merge";
-export { lookahead } from "./lookahead";
-export { toCallbacks } from "./toCallbacks";
-export { iteratorToIterable } from "./iteratorToIterable";
-export { map } from "./map";
-export { flatMap } from "./flatMap";
-export { interval } from "./interval";
-export { insert } from "./insert";
-export { zip } from "./zip";
-export { iterableToArray } from "./iterableToArray";
-export { filter } from "./filter";
-export { concat } from "./concat";
-export { fromEvent } from "./fromEvent";
-export { tap } from "./tap";
+import { getHostComponent, type HybridRef } from 'react-native-nitro-modules'
+import AixCellViewConfig from '../nitrogen/generated/shared/json/AixCellViewConfig.json'
+import type { AixCellViewProps } from './views/aix.nitro'
+import { useRef } from 'react'
+import type { AixRef } from './aix'
+export * from './fade-in'
+
+export { Aix, type AixRef } from './aix'
+export { AixFooter } from './footer'
+
+export const AixCell = getHostComponent<AixCellViewProps, {}>(
+  'AixCellView',
+  () => AixCellViewConfig
+)
+
+export type AixCellViewRef = HybridRef<AixCellViewProps, {}>
+
+export function useAixRef() {
+  return useRef<AixRef | null>(null)
+}

package/src/views/aix.nitro.ts

@@ -0,0 +1,148 @@
+import type {
+  HybridView,
+  HybridViewProps,
+  HybridViewMethods,
+} from 'react-native-nitro-modules'
+
+export interface AixAdditionalContentInsets {
+  whenKeyboardOpen: number
+  whenKeyboardClosed: number
+}
+
+export interface AixAdditionalContentInsetsProp {
+  top?: AixAdditionalContentInsets
+  bottom?: AixAdditionalContentInsets
+}
+
+export interface AixScrollIndicatorInsetValue {
+  whenKeyboardOpen: number
+  whenKeyboardClosed: number
+}
+
+export interface AixScrollIndicatorInsets {
+  top?: AixScrollIndicatorInsetValue
+  bottom?: AixScrollIndicatorInsetValue
+}
+
+export interface AixScrollOnFooterSizeUpdate {
+  /**
+   * Whether to scroll on footer size update.
+   *
+   * Default: true
+   */
+  enabled: boolean
+  /**
+   * The number of pixels from the bottom of the scroll view to the end of the content that is considered "scrolled near the end".
+   *
+   * Default: 100
+   */
+  scrolledToEndThreshold?: number
+  /**
+   * Whether to animate the scroll.
+   *
+   * Default: false
+   */
+  animated?: boolean
+}
+
+export interface AixProps extends HybridViewProps {
+  shouldStartAtEnd: boolean
+  /**
+   * Control the behavior of scrolling the content when footer size changes.
+   *
+   * By default, changing the height of the footer will shift content up in the scroll view.
+   *
+   * Default: { enabled: true, scrolledToEndThreshold: 100, animated: false }
+   */
+  scrollOnFooterSizeUpdate?: AixScrollOnFooterSizeUpdate
+  /**
+   * The number of pixels from the bottom of the scroll view to the end of the content that is considered "near the end".
+   *
+   * If the scroll view is scrolled to the end of the content, and the content is less than this threshold, the content will be shifted up when the keyboard is opened.
+   *
+   * By default, it will be the greater of the current blank size, or 200.
+   *
+   * TODO make this a more adaptive prop, like { strategy: 'blank-size', min: 200 } | { strategy: 'fixed', value: 200 }
+   *
+   */
+  scrollEndReachedThreshold?: number
+  /**
+   * Scroll end blank size threshold.
+   *
+   * If the blank size is less than this threshold, then the content will collapse to the keyboard when the keyboard is opened.
+   *
+   * You likely don't need to customize this much.
+   *
+   * Default: 0
+   *
+   * TODO we might want to implement this, but i'm not sure.
+   *
+   * By default, the content will collapse to the keyboard on opening if the blank size is less than half the size of the scroll view parent, and greater than the keyboard height.
+   */
+
+  additionalContentInsets?: AixAdditionalContentInsetsProp
+
+  /**
+   * Additional insets for the scroll indicator, added to existing safe area insets.
+   * Applied to verticalScrollIndicatorInsets on iOS.
+   */
+  additionalScrollIndicatorInsets?: AixScrollIndicatorInsets
+
+  /**
+   * The nativeID of the scroll view to use.
+   *
+   * If provided, will search for a scroll view with this accessibilityIdentifier.
+   * If not provided or not found, falls back to the default subview iteration logic.
+   */
+  mainScrollViewID?: string
+
+  /**
+   * Used to index of the second-to-last message.
+   *
+   * For AI chat apps, it should correspond to the index of the last user message.
+   *
+   * By default, it will simply be the seccond-to-last item. Specifically, it will correspond to the Cell index before the <Cell isLast />.
+   *
+   * However, if you use custom message types, you can override it with this prop.
+   *
+   * For example, if you use a "<Timestamp />" row in your LegendList or FlashList implementation, then you can set this value.
+   *
+   * This indicates which message will be scrolled into view.
+   *
+   */
+  penultimateCellIndex?: number
+}
+
+export interface AixMethods extends HybridViewMethods {
+  scrollToEnd(animated?: boolean): void
+  scrollToIndexWhenBlankSizeReady(
+    index: number,
+    animated?: boolean,
+    waitForKeyboardToEnd?: boolean
+  ): void
+}
+
+export type Aix = HybridView<
+  AixProps,
+  AixMethods,
+  { ios: 'swift'; android: 'kotlin' }
+>
+
+export interface AixCellViewProps extends HybridViewProps {
+  isLast: boolean
+  index: number
+}
+
+export type AixCellView = HybridView<
+  AixCellViewProps,
+  {},
+  { ios: 'swift'; android: 'kotlin' }
+>
+
+export interface AixComposerProps extends HybridViewProps {}
+
+export type AixComposer = HybridView<
+  AixComposerProps,
+  {},
+  { ios: 'swift'; android: 'kotlin' }
+>

package/docs/API.md

@@ -1,288 +0,0 @@
-# Aix API Reference
-
-## Classes
-
-- [DeferredIterable](#deferrediterable)
-    - [DeferredIterable.callback](#deferrediterablecallback)
-    - [DeferredIterable.iterable](#deferrediterableiterable)
-    - [DeferredIterable.finally](#deferrediterablefinally)
-    - [DeferredIterable.value](#deferrediterablevalue)
-    - [DeferredIterable.finish](#deferrediterablefinish)
-
-## Functions
-
-- [of](#of)
-- [map](#map)
-- [filter](#filter)
-- [flatMap](#flatMap)
-- [concat](#concat)
-- [reduce](#reduce)
-- [merge](#merge)
-- [insert](#insert)
-- [tap](#tap)
-- [zip](#zip)
-
-# Classes
-
-## DeferredIterable
-
-`DeferredIterable` makes it easy to turn stream of events into an interable.
-
-You typically interact with `DeferredIterable` in 2 ways:
-
-- To send data into the `DeferredIterable` call the `callback` function to send an `IteratorResult`
-- To read data from the `DeferredIterable` use the `iterable` property.
-
-### Example
-
-```javascript
-import { DeferredIterable } from "aix/deferredIterable";
-
-const deferredIterable = new DeferredIterable();
-
-// set up a callback that calls value on the deferredIterable
-const callback = value => deferredIterable.value(value);
-
-// attach the callback to the click event
-document.addEventListener('click', callback);
-
-// remove the callback when / if the iterable stops
-deferredIterable.finally(() => document.removeEventListener('click', deferredIterable.value));
-
-// go through all the click events
-for await (const click of deferredIterable.iterable) {
-    console.log('a button was clicked');
-}
-```
-
-### DeferredIterable.callback
-
-The callback to call to send a `IteratorResult` into the `DeferredIterable`. An `IteratorResult`
-has a `done` boolean property and a `value` property.
-
-```javascript
-import { DeferredIterable } from "aix/deferredIterable";
-
-const deferredIterable = new DeferredIterable();
-deferredIterable.callback({ done: false, value: 1 });
-deferredIterable.callback({ done: false, value: 2 });
-deferredIterable.callback({ done: false, value: 3 });
-deferredIterable.callback({ done: true });
-
-for await (const item of deferredIterable.iterable) {
-    console.log(item); // prints 1, 2, 3
-}
-```
-
-### DeferredIterable.iterable
-
-An ```AsyncIterable``` that returns values supplied by calling ```callback```.
-
-```javascript
-import { DeferredIterable } from "aix/deferredIterable";
-
-const deferredIterable = new DeferredIterable();
-deferredIterable.callback({ done: false, value: 1 });
-deferredIterable.callback({ done: false, value: 2 });
-deferredIterable.callback({ done: false, value: 3 });
-deferredIterable.callback({ done: true });
-
-for await (const item of deferredIterable.iterable) {
-    console.log(item); // prints 1, 2, 3
-}
-```
-
-### DeferredIterable.finally
-
-The callback supplied to ```finally``` is called when the iterable finishes either 
-because it's run out of values, it has returned or an error was thrown.
-
-### DeferredIterable.value
-
-A helper method to pass a value to the DeferredIterable. Calling
-```deferredIterable.value('test')``` is the same as calling 
-```deferredIterable.callback({ done: false, value: 'test'} )```.
-
-### DeferredIterable.finish
-
-A helper method to signal the last value to DeferredIterable. Calling
-```deferredIterable.finish()``` is the same as calling 
-```deferredIterable.callback({ done: true} )```.
-
-# Functions
-
-## of
-
-Construct a new async iterable from a series
-of values.
-
-```javascript
-import { of } from "aix/of";
-
-const values = of(1, 2, 3);
-
-for await(const item of mapped) {
-    console.log(item); // outputs 1, 2, 3
-}
-```
-
-## map
-
-Go through each item in the iterable and run a mapping function. The result will be a new
-iterable with the transformed values.
-
-```javascript
-import { map } from "aix/map";
-import { of } from "aix/of";
-
-const mapped = map(value => value * 2)(of(1, 2, 3));
-
-for await(const item of mapped) {
-    console.log(item); // outputs 2, 4, 6
-}
-```
-
-## flatMap
-
-Go through each item in the iterable and run a mapping function that returns an async iterable. The
-result is then flattened.
-
-```javascript
-import { flatMap } from "aix/flatMap";
-import { of } from "aix/of";
-
-const mapped = flatMap(
-    async function* (value) {
-        yield value;
-        yield value;
-    }
-)(of(1, 2, 3);
-
-for await(const item of mapped) {
-    console.log(item); // outputs 1, 1, 2, 2, 3, 3
-}
-```
-
-## filter
-
-Filter an iterable based on some criteria.
-
-```javascript
-import { filter } from "aix/filter";
-import { of } from "aix/of";
-
-const filtered = filter(
-    value => value % 2 === 0
-)(of(1, 2, 3, 4, 5, 6);
-
-for await(const item of filtered) {
-    console.log(item); // outputs 2, 4, 6
-}
-```
-
-## concat
-
-Concatenate 2 iterables in order
-
-```javascript
-import { concat } from "aix/concat";
-import { of } from "aix/of";
-
-const concatted = concat(
-    of(1, 2)
-)(of(3, 4);
-
-for await(const item of concatted) {
-    console.log(item); // outputs 1, 2, 3, 4
-}
-```
-
-## reduce
-
-Reduce a series of values to a single result. The series of values is
-reduced by a function that compbines a running total or accumulator with
-the next value to produce the new total or accumulator.
-
-```javascript
-import { reduce } from "aix/reduce";
-import { of } from "aix/of";
-
-const reduced = concat(
-    (accumulator, next) => accumulator + next, // sum the values together
-    0
-)(of(1, 2, 3));
-
-console.log(reduced); // 6
-```
-
-## merge
-
-Merge a number of async iterators into one concurrently. Order is not important.
-
-```javascript
-import { merge } from "aix/merge";
-import { of } from "aix/of";
-
-const merged = merge(
-    of(1, 2), of(3, 4)
-);
-
-for await(const item of concatted) {
-    console.log(item); // outputs 1, 2, 3, 4 in no particular order
-}
-```
-
-## insert
-
-Insert values at the beginning of an async iterable.
-
-```javascript
-import { insert } from "aix/insert";
-import { of } from "aix/of";
-
-const inserted = insert(
-    1, 2, 3
-)(of(4, 5, 6));
-
-for await(const item of concatted) {
-    console.log(item); // outputs 1, 2, 3, 4, 5, 6
-}
-```
-
-## tap
-
-'Taps' an async iterable. Allows you to run a function for
-every item in the iterable but doesn't do anything with the 
-result of the function. Typically used for side effects like
-logging.
-
-```javascript
-import { tap } from "aix/tap";
-import { of } from "aix/of";
-
-const tapped = tap(
-    value => console.log(value) // prints 1, 2, 3
-)(of(1, 2, 3));
-
-for await(const item of concatted) {
-    console.log(item); // prints 1, 2, 3
-}
-```
-
-## zip
-
-Creates a new iterable out of the two supplied by pairing up equally-positioned items from both iterables. The returned iterable is truncated to the length of the shorter of the two input iterables.
-
-```javascript
-import { zip } from "aix/zip";
-import { of } from "aix/of";
-
-const zipped = zip(
-    of(1, 2)
-)(of(1, 2));
-
-for await(const item of concatted) {
-    console.log(item); // prints [1, 1], [2, 2]
-}
-```
-

package/jest.config.js

@@ -1,17 +0,0 @@
-module.exports = {
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "transform": {
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-  }

package/lib/__tests__/deferredIterable.test.d.ts

@@ -1 +0,0 @@
-export {};