vdb-ai-chat 1.0.7 → 1.0.8

package/src/components/ChatInput.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import {
-  View,
   TextInput,
-  TouchableOpacity,
-  Text,
   StyleSheet,
   Platform,
   Image,
 } from "react-native";
 import type { ChatTheme } from "../types";
+import { useTheme } from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
+import styled from "styled-components/native";
 
 // Use expo-image on native if available, fallback to RN Image
 let ImageComponent: typeof Image = Image;
@@ -17,7 +17,7 @@ if (Platform.OS !== "web") {
     const ExpoImage = require("expo-image").Image;
     if (ExpoImage) ImageComponent = ExpoImage;
   } catch {
-    // expo-image not installed, use React Native Image
+    ImageComponent = Image;
   }
 }
 
@@ -39,7 +39,7 @@ const SendIcon = ({
   isEmpty: boolean;
 }) => {
   const isInactive = disabled || isEmpty;
-
+  const theme = useTheme();
   return (
     <ImageComponent
       source={{
@@ -48,7 +48,9 @@ const SendIcon = ({
       resizeMode="contain"
       style={{
         ...styles.buttonIcon,
-        tintColor: isInactive ? "#ACACB3" : "#020001",
+        tintColor: isInactive
+          ? theme["core-04"] || "#ACACB3"
+          : theme["core-05"] || "#020001",
         cursor: isInactive ? "auto" : "pointer",
       }}
     />
@@ -61,56 +63,80 @@ export const ChatInput: React.FC<Props> = ({
   onSend,
   disabled,
   placeholder,
-  theme,
   inputRef,
 }) => {
-  const isInactive = disabled || value.trim() === "";
-
+  const theme = useTheme();
   return (
-    <View
-      style={[
-        styles.inputContainer,
-        Platform.OS === "web" ? styles.webShadow : styles.nativeShadow,
-      ]}
+    <InputContainer
+      theme={theme}
+      style={[Platform.OS === "web" ? styles.webShadow : styles.nativeShadow]}
     >
-      <TextInput
+      <Input
         ref={inputRef}
         // @ts-ignore - supported on web via react-native-web
         id="chat-input"
-        style={[styles.input, styles.inputWeb]}
+        style={[styles.inputWeb]}
         placeholder={placeholder || "What are you looking for?"}
-        placeholderTextColor="#999"
+        placeholderTextColor={theme["core-06"] || "#999"}
         value={value}
         onChangeText={onChangeText}
         onSubmitEditing={onSend}
         editable={!disabled}
         autoFocus
       />
-      <TouchableOpacity
-        style={styles.button}
-        onPress={onSend}
-        disabled={disabled}
-      >
+      <SendButton onPress={onSend} disabled={disabled}>
         <SendIcon disabled={disabled} isEmpty={value.trim() === ""} />
-      </TouchableOpacity>
-    </View>
+      </SendButton>
+    </InputContainer>
   );
 };
 
+const InputContainer = styled.View<{ theme: DefaultTheme }>`
+  flex-direction: row;
+  padding-horizontal: 12px;
+  padding-vertical: 16px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 8px;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-01"] || "#FFFFFF"};
+  border-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-04"] || "#ACACB3"};
+  border-width: 1;
+  height: 56px;
+`;
+
+const Input = styled.TextInput<{ theme: DefaultTheme }>`
+  flex: 1;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-06"] || "#4F4E57"};
+  font-family: "Roboto";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  min-height: 20px;
+  max-height: 120px;
+  padding-horizontal: 0;
+  padding-vertical: 0;
+  background-color: transparent;
+  border-width: 0;
+`;
+
+const SendButton = styled.TouchableOpacity<{ theme: DefaultTheme }>`
+  margin-left: 0;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  height: 24;
+  aspect-ratio: 1;
+  border-radius: 0px;
+  background-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-01"] || "#FFFFFF"};
+`;
+
 const styles = StyleSheet.create({
-  inputContainer: {
-    flexDirection: "row",
-    paddingHorizontal: 12,
-    paddingVertical: 16,
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "stretch",
-    borderRadius: 8,
-    backgroundColor: "#FFF",
-    borderColor: "#ACACB3",
-    borderWidth: 1,
-    height: 56,
-  },
   webShadow: {
     ...(Platform.OS === "web"
       ? ({ boxShadow: "2px 8px 24px -6px rgba(55, 54, 64, 0.26)" } as any)
@@ -123,36 +149,11 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 3,
   },
-  input: {
-    flex: 1,
-    color: "#4F4E57",
-    fontFamily: "Roboto",
-    fontSize: 14,
-    fontStyle: "normal",
-    fontWeight: "400",
-    lineHeight: 20,
-    minHeight: 20,
-    maxHeight: 120,
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-    backgroundColor: "transparent",
-    borderWidth: 0,
-  },
   inputWeb: {
     ...(Platform.OS === "web"
       ? ({ outlineStyle: "none", outlineWidth: 0, boxShadow: "none" } as any)
       : {}),
   },
-  button: {
-    marginLeft: 0,
-    padding: 0,
-    justifyContent: "center",
-    alignItems: "center",
-    height: 24,
-    aspectRatio: 1,
-    borderRadius: 0,
-    backgroundColor: "#FFFFFF",
-  },
   buttonIcon: {
     height: 24,
     width: 24,