vdb-ai-chat 1.0.0

package/lib/typescript/storage.d.ts

@@ -0,0 +1,28 @@
+interface StorageInterface {
+    getItem: (key: string) => Promise<string | null>;
+    setItem: (key: string, value: string) => Promise<void>;
+    removeItem: (key: string) => Promise<void>;
+}
+/**
+ * Initialize storage with AsyncStorage for React Native.
+ * Call this once at app startup before using ChatWidget.
+ *
+ * @example
+ * import AsyncStorage from '@react-native-async-storage/async-storage';
+ * import { initStorage } from 'vdb-ai-chat';
+ * initStorage(AsyncStorage);
+ */
+export declare function initStorage(asyncStorage: StorageInterface): void;
+/**
+ * Check if storage is properly initialized for the current platform
+ */
+export declare function isStorageInitialized(): boolean;
+export declare const Storage: {
+    getItem: (key: string) => Promise<string | null>;
+    setItem: (key: string, value: string) => Promise<void>;
+    removeItem: (key: string) => Promise<void>;
+    getJSON: <T = any>(key: string, defaultValue?: T | null) => Promise<T | null>;
+    setJSON: (key: string, value: any) => Promise<void>;
+};
+export default Storage;
+//# sourceMappingURL=storage.d.ts.map

package/lib/typescript/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../src/storage.ts"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACxB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjD,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5C;AA8CD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAGhE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAK9C;AA8BD,eAAO,MAAM,OAAO;mBACG,MAAM,KAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;mBAI/B,MAAM,SAAS,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC;sBAIlC,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC;cAK9B,CAAC,aAAa,MAAM,iBAAgB,CAAC,GAAG,IAAI,KAAU,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;mBAalE,MAAM,SAAS,GAAG,KAAG,OAAO,CAAC,IAAI,CAAC;CAOxD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/typescript/theme.d.ts

@@ -0,0 +1,4 @@
+import type { ChatTheme } from "./types";
+export declare const defaultTheme: ChatTheme;
+export declare function mergeTheme(overrides?: Partial<ChatTheme>): ChatTheme;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,SAc1B,CAAC;AAEF,wBAAgB,UAAU,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CAEpE"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,51 @@
+export type Role = "user" | "assistant";
+export interface ChatMessage {
+    agent_response?: any;
+    id: string;
+    role: Role;
+    text: string;
+    createdAt: number;
+    isLoading?: boolean;
+    suggestions?: string[];
+    reaction?: "0" | "1" | "2";
+}
+export interface ChatTheme {
+    primaryColor: string;
+    backgroundColor: string;
+    inputColor: string;
+    inputBackgroundColor: string;
+    inputBorderRadius: number;
+    inputTextColor: string;
+    userBubbleColor: string;
+    userTextColor: string;
+    botBubbleColor: string;
+    botTextColor: string;
+    borderRadius: number;
+    fontFamily?: string;
+    fontSize: number;
+    listContentBackgroundColor?: string;
+}
+export interface ChatWidgetProps {
+    apiUrl: string;
+    userId?: string;
+    userToken?: string;
+    priceMode?: string;
+    modalHeight?: number;
+    theme?: Partial<ChatTheme>;
+    initialMessages?: ChatMessage[];
+    placeholder?: string;
+    onClose?: () => void;
+    onClearChat?: () => void;
+    /** Called when "View All" is pressed. Receives the deep link URL and payload. */
+    onViewAllPress?: (deepLinkUrl: string, payload: any) => void;
+    /** Called when a product item is pressed. Receives the deep link URL and item data. */
+    onItemPress?: (deepLinkUrl: string, item: any) => void;
+}
+export interface ChatWidgetRef {
+    clearChat: () => Promise<void>;
+}
+export interface ChatWidgetHandlers {
+    onViewAllPress?: (deepLinkUrl: string, payload: any) => void;
+    onItemPress?: (deepLinkUrl: string, item: any) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,WAAW,CAAC;AAExC,MAAM,WAAW,WAAW;IAC1B,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3B,eAAe,CAAC,EAAE,WAAW,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iFAAiF;IACjF,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7D,uFAAuF;IACvF,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7D,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD"}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "vdb-ai-chat",
+  "version": "1.0.0",
+  "description": "Cross-platform AI chat widget for React Native and Web",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.native.tsx",
+  "source": "src/index.native.tsx",
+  "files": [
+    "src",
+    "lib",
+    "dist",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "start:web": "webpack serve --config webpack.config.js --mode development",
+    "build:web": "webpack --config webpack.config.js --mode production",
+    "build:lib": "bob build",
+    "build": "npm run build:lib && npm run build:web",
+    "type-check": "tsc --noEmit",
+    "prepare": "npm run build:lib",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "react",
+    "chat",
+    "widget",
+    "ai",
+    "chatbot",
+    "cross-platform"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.64.0",
+    "expo-image": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "expo-image": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "react-native-web": "^0.19.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.1",
+    "axios": "^1.13.2",
+    "babel-loader": "^9.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "0.76.0",
+    "react-native-builder-bob": "^0.23.2",
+    "typescript": "^5.6.3",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/api.ts

@@ -0,0 +1,200 @@
+import { FeedbackAction } from "./components/utils";
+import { Storage } from "./storage";
+import type { ChatMessage } from "./types";
+
+// Generic params type reused for downstream APIs (e.g. product search payload)
+export type ChatApiParams = Record<string, any>;
+
+async function buildHeaders() {
+  const token = (await Storage.getItem("token")) || "";
+  const iid = (await Storage.getItem("persist:appState")) || "{}";
+  let installationId = "";
+  try {
+    const parsed = JSON.parse(iid);
+    installationId = parsed?.installationIdentifier 
+      ? JSON.parse(parsed.installationIdentifier) 
+      : "";
+  } catch {
+    installationId = "";
+  }
+  const session = (await Storage.getItem("session_cookie")) || "";
+
+  return {
+    "Content-Type": "application/json",
+    Accept: "application/json, text/plain, */*",
+    Authorization: `Token token=${token},installation_identifier=${installationId}`,
+    Cookie: `vdb-server_session=${session}`,
+  };
+}
+
+export function normaliseMessages(raw: any): ChatMessage[] {
+  const messages = Array.isArray(raw) ? raw : raw?.messages;
+  if (!Array.isArray(messages)) return [];
+
+  return messages.map((m, index) => ({
+    id: String(m.id ?? `${m.role}-${index}-${m.created_at ?? Date.now()}`),
+    role: m.role === "user" ? "user" : "assistant",
+    text: String(m.content ?? m.text ?? ""),
+    createdAt:
+      typeof m.created_at === "string"
+        ? Date.parse(m.created_at)
+        : typeof m.createdAt === "number"
+        ? m.createdAt
+        : Date.now(),
+    ...( m.role === "assistant" ? { agent_response: raw?.agent_response ? raw?.agent_response : undefined } : {}),
+    // agent_response: m.agent_response,
+    suggestions: Array.isArray(m.suggestions) ? m.suggestions : undefined,
+  }));
+}
+
+export async function fetchInitialMessages(
+  apiUrl: string,
+  _params?: ChatApiParams,
+  priceMode?: any
+): Promise<any> {
+  const conversations = await Storage.getJSON<Record<string, any>>("vdbchat_conversations", {});
+  const storedId = conversations?.[priceMode]?.conversation_id ?? null;
+  if (!priceMode) return;
+
+  const body: any = {};
+  if (storedId) {
+    body.conversation_id = Number.isNaN(Number(storedId))
+      ? storedId
+      : Number(storedId);
+  }
+
+  const res = await fetch(apiUrl, {
+    method: "POST",
+    headers: await buildHeaders(),
+    body: Object.keys(body).length ? JSON.stringify(body) : undefined,
+  });
+
+  if (!res.ok) {
+    throw new Error(`POST ${apiUrl} failed with ${res.status}`);
+  }
+
+  const data = await res.json();
+
+  // Persist conversation_id returned by the server for future calls
+  if (data && data.conversation_id != null && priceMode) {
+    const updatedConversations = conversations || {};
+    updatedConversations[priceMode] = {
+      conversation_id: data.conversation_id,
+    };
+    await Storage.setJSON("vdbchat_conversations", updatedConversations);
+  }
+
+  return data;
+}
+
+export async function sendUserMessage(
+  apiUrl: string,
+  userMessage: string,
+  _params: ChatApiParams,
+  _history: ChatMessage[],
+  priceMode: any
+): Promise<any> {
+  const conversations = await Storage.getJSON<Record<string, any>>("vdbchat_conversations", {});
+  const storedId = conversations?.[priceMode]?.conversation_id ?? null;
+  
+  if (!priceMode) {
+    return null;
+  }
+
+  const body: any = {
+    query: userMessage,
+  };
+  if (storedId) {
+    body.conversation_id = Number.isNaN(Number(storedId))
+      ? storedId
+      : Number(storedId);
+  }
+
+  const res = await fetch(apiUrl, {
+    method: "POST",
+    headers: await buildHeaders(),
+    body: JSON.stringify(body),
+  });
+
+  if (!res.ok) {
+    throw new Error(`POST ${apiUrl} failed with ${res.status}`);
+  }
+
+  const data = await res.json();
+
+  if (data && data.conversation_id != null && priceMode) {
+    const updatedConversations = conversations || {};
+    updatedConversations[priceMode] = {
+      conversation_id: data.conversation_id,
+    };
+    await Storage.setJSON("vdbchat_conversations", updatedConversations);
+  }
+
+  return data;
+}
+
+export async function clearChatHistory(apiUrl: string, priceMode: any): Promise<void> {
+  const conversations = await Storage.getJSON<Record<string, any>>("vdbchat_conversations", {});
+  const storedId = conversations?.[priceMode]?.conversation_id ?? null;
+  if (!storedId || !priceMode) return;
+
+  const url = new URL(apiUrl);
+  url.searchParams.set("conversation_id", storedId);
+
+  const res = await fetch(url.toString(), {
+    method: "DELETE",
+    headers: await buildHeaders(),
+  });
+
+  if (!res.ok) {
+    throw new Error(`DELETE ${apiUrl} failed with ${res.status}`);
+  }
+
+  // Clear from storage as well
+  const updatedConversations = conversations || {};
+  delete updatedConversations[priceMode];
+  await Storage.setJSON("vdbchat_conversations", updatedConversations);
+}
+
+export async function getProducts(params: ChatApiParams): Promise<any> {
+  const res = await fetch(
+    "https://pdpdemo1.demo.customvirtual.app/v3/vdb/search_diamonds",
+    {
+      method: "POST",
+      headers: await buildHeaders(),
+      body: JSON.stringify({
+        vdb: {
+          ...params,
+          page_size: 5,
+          price_mode: 1,
+          vdb_setting: "true",
+        },
+      }),
+    }
+  );
+
+  if (!res.ok) {
+    throw new Error(`POST failed with ${res.status}`);
+  }
+
+  const data = await res.json();
+  return data;
+}
+
+export const handleFeedbackActionApi = async (
+  action: FeedbackAction,
+  conversation_id: string,
+  message_id: string
+) => {
+  const feedbackUrl = `https://pdpdemo1.demo.customvirtual.app/v3/agent_conversations/${conversation_id}/conversation_messages/${message_id}/reaction`;
+  const payload = {
+    reaction: action,
+  };
+
+  const response = await fetch(feedbackUrl, {
+    method: "POST",
+    headers: await buildHeaders(),
+    body: JSON.stringify(payload),
+  });
+  return response;
+};

package/src/components/ChatHeader.tsx

@@ -0,0 +1,114 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  Image,
+} from "react-native";
+import React from "react";
+
+// Use expo-image on native if available, fallback to RN Image
+let ImageComponent: typeof Image = Image;
+if (Platform.OS !== "web") {
+  try {
+    const ExpoImage = require("expo-image").Image;
+    if (ExpoImage) ImageComponent = ExpoImage;
+  } catch {
+    // expo-image not installed, use React Native Image
+  }
+}
+
+const CloseIcon = () => {
+  return (
+    <ImageComponent
+      source={{
+        uri: "https://cdn.jsdelivr.net/npm/feather-icons/dist/icons/x.svg",
+      }}
+      resizeMode="contain"
+      style={{ width: 20, height: 20 }}
+    />
+  );
+};
+
+const ChatHeader = ({
+  onClose,
+  onClearChat,
+}: {
+  onClose?: () => void;
+  onClearChat?: () => void;
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.logoContainer}>
+        <ImageComponent
+          source={{ uri: "https://getvdb.com/mail_images/web_app_favicon.ico" }}
+          resizeMode="contain"
+          style={{ width: 30, height: 30, marginRight: 10 }}
+        />
+        <Text style={styles.title}>AI Search</Text>
+      </View>
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity onPress={() => onClearChat?.()}>
+          <Text style={styles.clearChatText}>Clear Chat</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={() => onClose?.()}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: "#37363F",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  logoContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: "500",
+    color: "#FFF",
+  },
+  closeButton: {
+    backgroundColor: "#FFF",
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  closeIconText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#37363F",
+    textAlign: "center",
+    lineHeight: 16,
+  },
+  closeButtonText: {
+    color: "#FFF",
+  },
+  clearChatText: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "500",
+    textDecorationLine: "none",
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+  },
+});
+
+export default ChatHeader;

package/src/components/ChatInput.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import {
+  View,
+  TextInput,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  Platform,
+  Image,
+} from "react-native";
+import type { ChatTheme } from "../types";
+
+// Use expo-image on native if available, fallback to RN Image
+let ImageComponent: typeof Image = Image;
+if (Platform.OS !== "web") {
+  try {
+    const ExpoImage = require("expo-image").Image;
+    if (ExpoImage) ImageComponent = ExpoImage;
+  } catch {
+    // expo-image not installed, use React Native Image
+  }
+}
+
+interface Props {
+  value: string;
+  onChangeText: (t: string) => void;
+  onSend: () => void;
+  disabled?: boolean;
+  placeholder?: string;
+  theme: ChatTheme;
+  inputRef?: React.RefObject<TextInput>;
+}
+
+const SendIcon = ({
+  disabled,
+  isEmpty,
+}: {
+  disabled?: boolean;
+  isEmpty: boolean;
+}) => {
+  const isInactive = disabled || isEmpty;
+
+  return (
+    <ImageComponent
+      source={{
+        uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/up.svg",
+      }}
+      resizeMode="contain"
+      style={{ ...styles.buttonIcon, tintColor: isInactive ? "#AAA" : "#FFF" }}
+    />
+  );
+};
+
+export const ChatInput: React.FC<Props> = ({
+  value,
+  onChangeText,
+  onSend,
+  disabled,
+  placeholder,
+  theme,
+  inputRef,
+}) => {
+  const isInactive = disabled || value.trim() === "";
+
+  return (
+    <View
+      style={[
+        styles.container,
+        Platform.OS === "web" ? styles.webShadow : styles.nativeShadow,
+      ]}
+    >
+      <TextInput
+        ref={inputRef}
+        // @ts-ignore - supported on web via react-native-web
+        id="chat-input"
+        style={[styles.input, styles.inputWeb]}
+        placeholder={placeholder || "What are you looking for?"}
+        placeholderTextColor="#999"
+        value={value}
+        onChangeText={onChangeText}
+        onSubmitEditing={onSend}
+        editable={!disabled}
+        autoFocus
+      />
+      <TouchableOpacity
+        style={{
+          ...styles.button,
+          backgroundColor: isInactive ? "#EDEDF2" : "#C000FF",
+        }}
+        onPress={onSend}
+        disabled={disabled}
+      >
+        <SendIcon disabled={disabled} isEmpty={value.trim() === ""} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    height: 48,
+    paddingHorizontal: 16,
+    paddingVertical: 0,
+    justifyContent: "space-between",
+    alignItems: "center",
+    alignSelf: "stretch",
+    borderRadius: 56,
+    backgroundColor: "#FFF",
+    margin: 8,
+  },
+  webShadow: {
+    ...(Platform.OS === "web"
+      ? ({ boxShadow: "2px 8px 24px -6px rgba(55, 54, 64, 0.26)" } as any)
+      : {}),
+  },
+  nativeShadow: {
+    shadowColor: "#373640",
+    shadowOffset: { width: 2, height: 8 },
+    shadowOpacity: 0.26,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  input: {
+    flex: 1,
+    color: "#4F4E57",
+    fontFamily: "Roboto",
+    fontSize: 14,
+    fontStyle: "normal",
+    fontWeight: "400",
+    lineHeight: 20,
+    minHeight: 20,
+    maxHeight: 120,
+    paddingHorizontal: 8,
+    paddingVertical: 0,
+    backgroundColor: "transparent",
+    borderWidth: 0,
+  },
+  inputWeb: {
+    ...(Platform.OS === "web"
+      ? ({ outlineStyle: "none", outlineWidth: 0, boxShadow: "none" } as any)
+      : {}),
+  },
+  button: {
+    marginLeft: 8,
+    padding: 4,
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    aspectRatio: 1,
+    borderRadius: 40,
+    backgroundColor: "#C000FF",
+  },
+  buttonIcon: {
+    height: 16,
+    width: 16,
+  },
+  sendIconText: {
+    fontSize: 18,
+    fontWeight: "700",
+    textAlign: "center",
+  },
+});