chore: extract indicator styles in theme

Author: isekovanic

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { Channel } from 'stream-chat';
 
@@ -31,15 +31,20 @@ export const AITypingIndicatorView = <
 
   const {
     theme: {
+      aiTypingIndicatorView: { container, text },
       colors: { black, grey_gainsboro },
     },
   } = useTheme();
 
   return aiState in allowedStates ? (
-    <View style={{ backgroundColor: grey_gainsboro, paddingHorizontal: 16, paddingVertical: 18 }}>
-      <Text style={{ color: black }}>{allowedStates[aiState]}</Text>
+    <View style={[styles.container, { backgroundColor: grey_gainsboro }, container]}>
+      <Text style={[{ color: black }, text]}>{allowedStates[aiState]}</Text>
     </View>
   ) : null;
 };
 
 AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';
+
+const styles = StyleSheet.create({
+  container: { paddingHorizontal: 16, paddingVertical: 18 },
+});

package/src/contexts/themeContext/utils/theme.ts

@@ -90,6 +90,10 @@ export type MarkdownStyle = Partial<{
 }>;
 
 export type Theme = {
+  aiTypingIndicatorView: {
+    container: ViewStyle;
+    text: TextStyle;
+  };
   attachmentPicker: {
     bottomSheetContentContainer: ViewStyle;
     durationText: TextStyle;
@@ -813,6 +817,10 @@ export type Theme = {
 };
 
 export const defaultTheme: Theme = {
+  aiTypingIndicatorView: {
+    container: {},
+    text: {},
+  },
   attachmentPicker: {
     bottomSheetContentContainer: {},
     durationText: {},