stream-chat-react-native-core 9.9.4 → 9.10.0

package/src/ai-components/charts/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './generate-pie-colors';
+export * from './parse-json-chart';

package/src/ai-components/charts/utils/parse-json-chart.ts

@@ -0,0 +1,15 @@
+import type { ChartSpec } from '../types';
+import { parseVegalite, VegaLiteSchema } from '../vega-lite';
+
+export const parseJsonChart = (code: string): ChartSpec => {
+  const json = JSON.parse(code);
+
+  try {
+    const parsedVegaLite = VegaLiteSchema.parse(json);
+    return parseVegalite(parsedVegaLite);
+  } catch (_error) {
+    /* do nothing */
+  }
+
+  throw new Error('Unknown type of JSON formatted chart.');
+};

package/src/ai-components/charts/vega-lite/index.ts

@@ -0,0 +1,2 @@
+export * from './parser';
+export * from './schema';

package/src/ai-components/charts/vega-lite/parser.ts

@@ -0,0 +1,49 @@
+import type { VegaLite } from './schema';
+
+import type { ChartSpec, Datum } from '../types';
+import { colorFromLabel } from '../utils';
+
+export const parseVegalite = (spec: VegaLite): ChartSpec => {
+  if (spec.type === 'pie') {
+    const tField = spec.encoding?.theta?.field;
+    const cField = spec.encoding?.color?.field;
+    const usedHues: number[] = [];
+    const data = (spec.data?.values ?? [])
+      .map((d) => {
+        const y = Number(d[tField]);
+        const x = cField ? String(d[cField]) : '';
+        return Number.isFinite(y)
+          ? {
+              dimension: x.trim(),
+              value: y,
+              color: colorFromLabel(x, usedHues),
+            }
+          : null;
+      })
+      .filter(Boolean) as Datum[];
+    return { type: 'pie', data };
+  }
+
+  const { x, y, color } = spec.encoding;
+  const xField = x?.field,
+    yField = y?.field;
+  const xIsTime = (x?.type ?? '').toLowerCase() === 'temporal';
+  const xIsNumeric = (x?.type ?? '').toLowerCase() === 'quantitative';
+
+  const data = (spec.data?.values ?? [])
+    .map((d) => {
+      const xv = xIsTime && typeof d[xField] === 'string' ? new Date(d[xField]) : d[xField];
+      const yv = Number(d[yField]);
+      if (!Number.isFinite(yv)) return null;
+      const c = color?.field ? String(d[color.field]) : undefined;
+      return { dimension: xv, value: yv, color: c };
+    })
+    .filter(Boolean) as Datum[];
+
+  return {
+    type: spec.type === 'xy' && spec.markName !== 'arc' ? spec.markName : 'pie',
+    data,
+    isTemporalDim: xIsTime,
+    isNumericDim: xIsNumeric,
+  };
+};

package/src/ai-components/charts/vega-lite/schema.ts

@@ -0,0 +1,112 @@
+import { z } from 'zod';
+
+/* primitives */
+export const VLType = z.enum(['quantitative', 'ordinal', 'nominal', 'temporal']);
+
+const FieldRef = z.object({
+  field: z.string(),
+  type: VLType.optional(),
+});
+
+const ColorXY = z.object({
+  field: z.string().optional(),
+  type: VLType.optional(),
+});
+const ColorPie = z.object({ field: z.string(), type: VLType.optional() });
+
+/* we support only these currently */
+const MarkName = z.enum([
+  'bar',
+  'line',
+  'area',
+  'point',
+  'arc',
+  // 'rect',
+  // 'rule',
+  // 'text',
+  // 'tick',
+  // 'circle',
+  // 'square',
+  // 'trail',
+  // 'geoshape',
+  // 'image',
+]);
+
+const MarkDef = z.looseObject({
+  type: z.union([MarkName, z.string()]).optional(),
+});
+
+/* encodings */
+const XyEncoding = z.object({
+  x: FieldRef,
+  y: FieldRef,
+  color: ColorXY.optional(),
+});
+
+const PieEncoding = z.object({
+  theta: FieldRef,
+  color: ColorPie.optional(),
+});
+
+/* base spec */
+const BaseVL = z.object({
+  archetype: z.literal('vegalite'),
+  $schema: z.string().optional(),
+  data: z.object({
+    values: z.array(z.record(z.string(), z.unknown())),
+  }),
+  mark: z.union([MarkName, MarkDef, z.string()]).optional(),
+  layer: z.array(z.looseObject({ mark: MarkDef })).optional(),
+  marks: z.array(MarkDef).optional(),
+  markName: MarkName,
+});
+
+/* branches (with explicit kind) */
+const VL_XY = BaseVL.extend({
+  type: z.literal('xy'),
+  encoding: XyEncoding,
+}).strip();
+
+const VL_PIE = BaseVL.extend({
+  type: z.literal('pie'),
+  encoding: PieEncoding,
+}).strip();
+
+const normalizeMarkName = (m: unknown): string | undefined => {
+  if (typeof m === 'string') return m.toLowerCase();
+  if (m && typeof m === 'object' && typeof (m as { type?: unknown }).type === 'string') {
+    return String((m as { type?: unknown }).type).toLowerCase();
+  }
+  return undefined;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- untyped JSON input, validated by the zod schema below
+const deriveMarkName = (o: any): string | undefined => {
+  // spec.mark (string or MarkDef)
+  const direct = normalizeMarkName(o?.mark);
+  if (direct) return direct;
+
+  // first layer's mark.type
+  const firstLayerMark =
+    Array.isArray(o?.layer) && o.layer[0]?.mark ? normalizeMarkName(o.layer[0].mark) : undefined;
+  if (firstLayerMark) return firstLayerMark;
+
+  // first marks[] item .type
+  return Array.isArray(o?.marks) && o.marks.length > 0 ? normalizeMarkName(o.marks[0]) : undefined;
+};
+
+export const VegaLiteCore = z.discriminatedUnion('type', [VL_XY, VL_PIE]);
+
+/* final schema: preprocess to inject needed metadata, then discriminated union */
+export const VegaLiteSchema = z.preprocess((raw) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- untyped JSON input, validated by the zod schema below
+  const o: any = raw ?? {};
+  const markName = deriveMarkName(o);
+  const hasTheta = !!o?.encoding?.theta;
+
+  const type = markName === 'arc' || hasTheta ? 'pie' : 'xy';
+
+  return { ...o, type, archetype: 'vegalite', markName };
+}, VegaLiteCore);
+
+export type VegaLite = z.infer<typeof VegaLiteSchema>;

package/src/ai-components/components/BottomSheet.tsx

@@ -0,0 +1,158 @@
+import React, { type PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
+import { Dimensions, Modal, Platform, Pressable, StyleSheet, View } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  type GestureType,
+} from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { sheetStoreApi, useBottomSheetState } from '../store';
+
+type Props = PropsWithChildren;
+
+const { height: SCREEN_H } = Dimensions.get('window');
+const SPRING = { duration: 200 };
+const MAX_BOTTOM_SHEET_HEIGHT = Math.round(SCREEN_H * 0.4);
+const BACKDROP_OPACITY = 0.4;
+
+export function BottomSheet({ children }: Props) {
+  const { open, height } = useBottomSheetState();
+  const [bottomSheetModalOpen, setBottomSheetModalOpen] = useState(open);
+  const maxTranslateY = SCREEN_H;
+  const translateY = useSharedValue(maxTranslateY);
+
+  const bottomSheetHeight = useMemo(() => Math.min(height, MAX_BOTTOM_SHEET_HEIGHT), [height]);
+  const bottomSheetY = SCREEN_H - bottomSheetHeight;
+
+  useEffect(() => {
+    if (open) {
+      setBottomSheetModalOpen(true);
+    } else {
+      translateY.value = withTiming(maxTranslateY, SPRING, (finished) => {
+        if (finished) {
+          runOnJS(setBottomSheetModalOpen)(false);
+        }
+      });
+    }
+  }, [setBottomSheetModalOpen, maxTranslateY, open, translateY]);
+
+  useEffect(() => {
+    if (bottomSheetModalOpen && open) {
+      translateY.value = withTiming(bottomSheetY, SPRING);
+    }
+  }, [open, bottomSheetModalOpen, bottomSheetY, translateY]);
+
+  const dragStartY = useRef(0);
+  const panRef = useRef<GestureType | undefined>(undefined);
+  const scrollRef = useRef<GestureType | undefined>(undefined);
+
+  const nativeScroll = useMemo(() => Gesture.Native().withRef(scrollRef), []);
+
+  const pan = Gesture.Pan()
+    .withRef(panRef)
+    .requireExternalGestureToFail(scrollRef)
+    .onBegin(() => {
+      dragStartY.current = 0;
+    })
+    .onUpdate((e) => {
+      if (dragStartY.current === 0) dragStartY.current = translateY.value;
+      const next = dragStartY.current + e.translationY;
+      const minY = bottomSheetY;
+      const maxY = maxTranslateY;
+      const overTop = next < minY;
+      const overBottom = next > maxY;
+      translateY.value = overTop
+        ? minY - (minY - next) * 0.2
+        : overBottom
+          ? maxY + (next - maxY) * 0.2
+          : next;
+    })
+    .onEnd((e) => {
+      // very basic momentum bias
+      const projected = e.translationY + e.velocityY * 0.15;
+      const nearest = projected >= bottomSheetHeight * 0.5 ? maxTranslateY : bottomSheetY;
+      translateY.value = withTiming(nearest, SPRING, (finished) => {
+        if (finished && nearest === maxTranslateY) runOnJS(sheetStoreApi.closeSheet)();
+      });
+    });
+
+  const backdropStyle = useAnimatedStyle(() => {
+    const minY = bottomSheetY;
+    const t = 1 - Math.min(1, Math.max(0, (translateY.value - minY) / (maxTranslateY - minY)));
+    return {
+      opacity: t * BACKDROP_OPACITY,
+      pointerEvents: t > 0.02 ? ('auto' as const) : ('none' as const),
+    };
+  });
+
+  const sheetStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  const sheetContentStyle = useMemo(() => ({ height: bottomSheetHeight }), [bottomSheetHeight]);
+
+  return (
+    <Modal visible={bottomSheetModalOpen} transparent={true}>
+      <GestureHandlerRootView style={styles.gestureHandlerRootView}>
+        <View style={StyleSheet.absoluteFill} pointerEvents={'box-none'}>
+          <Animated.View style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]}>
+            <Pressable style={StyleSheet.absoluteFill} onPress={sheetStoreApi.closeSheet} />
+          </Animated.View>
+
+          <GestureDetector gesture={pan}>
+            <Animated.View style={[styles.sheet, sheetStyle]}>
+              <View style={styles.handleContainer} pointerEvents={'none'}>
+                <View style={styles.handle} />
+              </View>
+
+              <View style={[styles.content, sheetContentStyle]}>
+                <View style={styles.contentContainer}>
+                  {open ? (
+                    <GestureDetector gesture={nativeScroll}>{children}</GestureDetector>
+                  ) : null}
+                </View>
+              </View>
+            </Animated.View>
+          </GestureDetector>
+        </View>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  gestureHandlerRootView: { flex: 1 },
+  backdrop: { backgroundColor: '#000' },
+  sheet: {
+    position: 'absolute',
+    overflow: 'hidden',
+    left: 0,
+    right: 0,
+    top: 0,
+    height: SCREEN_H,
+    transform: [{ translateY: SCREEN_H }],
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    backgroundColor: 'white',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOpacity: 0.2,
+        shadowOffset: { width: 0, height: -4 },
+        shadowRadius: 12,
+      },
+      android: { elevation: 18 },
+    }),
+  },
+  handleContainer: { alignItems: 'center', paddingVertical: 8 },
+  handle: { width: 40, height: 4, borderRadius: 2, backgroundColor: '#444' },
+  content: { flexGrow: 0 },
+  contentContainer: { flex: 1, minHeight: 0 },
+});

package/src/ai-components/components/MarkdownReactiveScrollView.tsx

@@ -0,0 +1,92 @@
+import { type PropsWithChildren, useMemo } from 'react';
+import { type LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { clamp, scrollTo, useAnimatedRef, useSharedValue } from 'react-native-reanimated';
+
+import { useStableCallback } from '../internal/hooks/useStableCallback';
+
+export const MarkdownReactiveScrollView = ({ children }: PropsWithChildren) => {
+  const scrollViewRef = useAnimatedRef<Animated.ScrollView>();
+  const contentWidth = useSharedValue(0);
+  const visibleContentWidth = useSharedValue(0);
+  const offsetBeforeScroll = useSharedValue(0);
+  const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .onBegin((event) => {
+          touchStart.value = { x: event.x, y: event.y };
+        })
+        .onTouchesMove((event, state) => {
+          if (!touchStart.value || !event.changedTouches.length) {
+            state.fail();
+            return;
+          }
+
+          const xDiff = Math.abs(event.changedTouches[0]!.x - touchStart.value.x);
+          const yDiff = Math.abs(event.changedTouches[0]!.y - touchStart.value.y);
+          const isHorizontalPanning = xDiff > yDiff;
+
+          if (isHorizontalPanning) {
+            state.activate();
+          } else {
+            state.fail();
+          }
+        })
+        .onUpdate((event) => {
+          const { translationX } = event;
+
+          scrollTo(scrollViewRef, offsetBeforeScroll.value - translationX, 0, false);
+        })
+        .onEnd((event) => {
+          const { translationX } = event;
+
+          const velocityEffect = event.velocityX * 0.3;
+
+          const finalPosition = clamp(
+            offsetBeforeScroll.value - translationX - velocityEffect,
+            0,
+            contentWidth.value - visibleContentWidth.value,
+          );
+
+          offsetBeforeScroll.value = finalPosition;
+
+          scrollTo(scrollViewRef, finalPosition, 0, true);
+        }),
+    [contentWidth, offsetBeforeScroll, scrollViewRef, touchStart, visibleContentWidth],
+  );
+
+  const onContentSizeChange = useStableCallback((width: number) => {
+    contentWidth.value = width;
+  });
+
+  const onLayout = useStableCallback((event: LayoutChangeEvent) => {
+    visibleContentWidth.value = event.nativeEvent.layout.width;
+  });
+
+  return (
+    <View style={styles.wrapper}>
+      <GestureDetector gesture={panGesture}>
+        <Animated.ScrollView
+          contentContainerStyle={styles.contentContainer}
+          horizontal
+          nestedScrollEnabled={true}
+          onContentSizeChange={onContentSizeChange}
+          onLayout={onLayout}
+          ref={scrollViewRef}
+          scrollEnabled={false}
+        >
+          {children}
+        </Animated.ScrollView>
+      </GestureDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+  },
+  contentContainer: { flexGrow: 1 },
+});

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

@@ -0,0 +1,2 @@
+export * from './MarkdownReactiveScrollView';
+export * from '../native/PerfText';

package/src/ai-components/contexts/composer-context.tsx

@@ -0,0 +1,73 @@
+import React, { type PropsWithChildren, useMemo, useState } from 'react';
+
+import type { StateStore } from '@stream-io/state-store';
+
+import { useStableCallback } from '../internal/hooks/useStableCallback';
+import type { ComposerViewProps } from '../message-composer';
+import { MediaPickerService } from '../services';
+import type { AbstractMediaPickerService } from '../services/media-picker-service/AbstractMediaPickerService';
+import { type ComposerState, createNewComposerStore } from '../store';
+
+export type ComposerContext = {
+  state: StateStore<ComposerState>;
+  setText: (text: string) => void | Promise<void>;
+  sendMessage: () => void | Promise<void>;
+  mediaPickerService?: AbstractMediaPickerService;
+};
+
+export type ComposerContextProps = PropsWithChildren<
+  Pick<ComposerViewProps, 'onSendMessage' | 'mediaPickerService' | 'state'>
+>;
+
+export const ComposerContext = React.createContext<ComposerContext | undefined>(undefined);
+
+export const ComposerProvider = ({
+  onSendMessage,
+  mediaPickerService: mediaPickerServiceOverride,
+  state: stateOverride,
+  children,
+}: ComposerContextProps) => {
+  const [mediaPickerService] = useState(
+    () => mediaPickerServiceOverride ?? (MediaPickerService ? new MediaPickerService() : undefined),
+  );
+  const [state] = useState(() => stateOverride ?? createNewComposerStore());
+
+  const setText = useStableCallback((text: string) => state.partialNext({ text }));
+
+  const clearState = useStableCallback(() => {
+    setText('');
+    mediaPickerService?.clearAssets();
+  });
+
+  const sendMessage = useStableCallback(async () => {
+    const { text, custom } = state.getLatestValue();
+
+    const data = {
+      text,
+      attachments: mediaPickerService?.state.getLatestValue().assets,
+      custom,
+    };
+
+    clearState();
+
+    await onSendMessage(data);
+  });
+
+  const contextValue = useMemo(
+    () => ({ mediaPickerService, state, setText, sendMessage, clearState }),
+    [state, mediaPickerService, setText, sendMessage, clearState],
+  );
+
+  return <ComposerContext.Provider value={contextValue}>{children}</ComposerContext.Provider>;
+};
+
+export const useMessageComposerContext = () => {
+  const value = React.useContext(ComposerContext);
+  if (value === undefined) {
+    throw new Error(
+      'The useMessageComposerContext hook was called outside of the ComposerContext provider.',
+    );
+  }
+
+  return value;
+};

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

@@ -0,0 +1,2 @@
+export * from './composer-context';
+export * from './theme-context';

package/src/ai-components/contexts/theme-context.tsx

@@ -0,0 +1,68 @@
+import React, { createContext, type PropsWithChildren, useContext, useMemo } from 'react';
+
+import merge from 'lodash/merge';
+
+import { defaultTheme, type Theme } from '../theme';
+
+export type DeepPartial<T> = T extends (...args: never[]) => unknown
+  ? T
+  : T extends object
+    ? { [K in keyof T]?: DeepPartial<T[K]> }
+    : T;
+
+export type StreamThemeInputValue = {
+  mergedStyle?: Theme;
+  style?: DeepPartial<Theme>;
+};
+
+export type MergedThemesParams = {
+  style?: DeepPartial<Theme>;
+  theme?: Theme;
+};
+
+export type ThemeContextValue = {
+  theme: Theme;
+};
+
+export const mergeThemes = (params: MergedThemesParams) => {
+  const { style, theme } = params;
+  // TODO: Use structured-clone here or something similar.
+  const finalTheme = (
+    !theme || Object.keys(theme).length === 0
+      ? JSON.parse(JSON.stringify(defaultTheme))
+      : JSON.parse(JSON.stringify(theme))
+  ) as Theme;
+
+  if (style) {
+    merge(finalTheme, style);
+  }
+
+  return finalTheme;
+};
+
+export const ThemeContext = createContext<Theme | undefined>(undefined);
+
+export const StreamTheme = (
+  props: PropsWithChildren<StreamThemeInputValue & Partial<ThemeContextValue>>,
+) => {
+  const { children, mergedStyle, style, theme } = props;
+
+  const modifiedTheme = useMemo(() => {
+    if (mergedStyle) {
+      return mergedStyle;
+    }
+
+    return mergeThemes({ style, theme });
+  }, [mergedStyle, style, theme]);
+
+  return <ThemeContext.Provider value={modifiedTheme}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+  const theme = useContext(ThemeContext);
+
+  if (theme === undefined) {
+    throw new Error('The useTheme hook was called outside the StreamTheme Provider.');
+  }
+  return { theme };
+};

package/src/ai-components/index.ts

@@ -0,0 +1,29 @@
+// primitives
+export * from './markdown';
+export * from './syntax-highlighting';
+export * from './charts';
+export * from './message-composer';
+export * from './StreamingMessageView';
+export * from './AITypingIndicatorView';
+
+// components
+export * from './components';
+
+// contexts
+export * from './contexts';
+
+// services
+export * from './services';
+export * from './transcription/useDictation';
+export { isDictationAvailable } from './native/AIDictation';
+
+// state-stores
+export * from './store';
+
+// theme
+export * from './theme';
+
+// Native handler registration, used by the `stream-chat-react-native/ai-components` and
+// `stream-chat-expo/ai-components` entry points to register only the native pieces this entry
+// point needs (without importing, and therefore bundling, the main SDK entry point).
+export { registerNativeHandlers } from '../native';

package/src/ai-components/internal/hooks/useStableCallback.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef } from 'react';
+
+export type StableCallback<A extends unknown[], R> = (...args: A) => R;
+
+/**
+ * A utility hook implementing a stable callback. It takes in an unstable method that
+ * is supposed to be invoked somewhere deeper in the DOM tree without making it
+ * change its reference every time the parent component rerenders. It will also return
+ * the value of the callback if it does return one.
+ * A common use-case would be having a function whose invocation depends on state
+ * somewhere high up in the DOM tree and wanting to use the same function deeper
+ * down, for example in a leaf node and simply using useCallback results in
+ * cascading dependency hell. If we wrap it in useStableCallback, we would be able
+ * to:
+ * - Use the same function as a dependency of another hook (since it is stable)
+ * - Still invoke it and get the latest state
+ *
+ * **Caveats:**
+ * - Never wrap a function that is supposed to return a React.ReactElement in
+ *   useStableCallback, since React will not know that the DOM needs to be updated
+ *   whenever the callback value changes (for example, renderItem from FlatList must
+ *   never be wrapped in this hook)
+ * - Always prefer using a standard useCallback/stable function wherever possible
+ *   (the purpose of useStableCallback is to bridge the gap between top level contexts
+ *   and cascading rereders in downstream components - **not** as an escape hatch)
+ * @param callback - the callback we want to stabilize
+ */
+export const useStableCallback = <A extends unknown[], R>(
+  callback: StableCallback<A, R>,
+): StableCallback<A, R> => {
+  const ref = useRef(callback);
+  ref.current = callback;
+
+  return useCallback<StableCallback<A, R>>((...args) => {
+    return ref.current(...args);
+  }, []);
+};

package/src/ai-components/internal/icons/Camera.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { type IconProps, RootPath, RootSvg } from './utils/base';
+
+export const Camera = (props: IconProps) => (
+  <RootSvg {...props}>
+    <RootPath
+      d='M15 3H9L7 5H3a1 1 0 00-1 1v14a1 1 0 001 1h18a1 1 0 001-1V6a1 1 0 00-1-1h-4l-2-2zM7.828 7l2-2h4.344l2 2H20v12H4V7h3.828zM12 18a5.5 5.5 0 110-11 5.5 5.5 0 010 11zm3.5-5.5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z'
+      {...props}
+    />
+  </RootSvg>
+);

package/src/ai-components/internal/icons/CircleStop.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Path, Svg } from 'react-native-svg';
+
+import type { IconProps } from './utils/base';
+
+type Props = IconProps & {
+  size: number;
+};
+
+export const CircleStop = ({ size, ...rest }: Props) => (
+  <Svg fill={'none'} height={size} viewBox={`0 0 ${size} ${size}`} width={size}>
+    <Path
+      d='M16.4551 27.2441C22.6309 27.2441 27.7441 22.1198 27.7441 15.9551C27.7441 9.7793 22.6198 4.66602 16.444 4.66602C10.2793 4.66602 5.16602 9.7793 5.16602 15.9551C5.16602 22.1198 10.2904 27.2441 16.4551 27.2441ZM16.4551 25.3626C11.2311 25.3626 7.05859 21.179 7.05859 15.9551C7.05859 10.7311 11.2201 6.54753 16.444 6.54753C21.668 6.54753 25.8516 10.7311 25.8626 15.9551C25.8737 21.179 21.679 25.3626 16.4551 25.3626ZM13.5221 19.9837H19.3659C20.0632 19.9837 20.4727 19.5742 20.4727 18.8991V13.0111C20.4727 12.3249 20.0632 11.9264 19.3659 11.9264H13.5221C12.8359 11.9264 12.4154 12.3249 12.4154 13.0111V18.8991C12.4154 19.5742 12.8359 19.9837 13.5221 19.9837Z'
+      {...rest}
+    />
+  </Svg>
+);