vdb-ai-chat 1.0.6 → 1.0.8

package/src/components/MessageBubble.tsx

@@ -2,10 +2,14 @@ import React, { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
 import SuggestionsRow from "./SuggestionsRow";
 import type { ChatMessage, ChatTheme } from "../types";
+import { useTheme } from "styled-components/native";
+import styled from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
+import { css } from "styled-components/native";
 
 interface Props {
   message: ChatMessage;
-  theme: ChatTheme;
+  userTheme: ChatTheme;
   priceMode?: string;
   handleFeedbackAction?: (...args: any[]) => void;
   onReloadResults?: (message: ChatMessage) => void;
@@ -20,11 +24,7 @@ interface Props {
 
 const MessageBubbleComponent: React.FC<Props> = ({
   message,
-  theme,
-  priceMode,
-  handleFeedbackAction,
-  onReloadResults,
-  reloading,
+  userTheme,
   hasResults,
   totalResults,
   shownResults,
@@ -33,89 +33,128 @@ const MessageBubbleComponent: React.FC<Props> = ({
   isTyping,
 }) => {
   const isUser = message.role === "user";
-  
+  const theme = useTheme();
   return (
-    <View
-      style={[styles.container, isUser ? styles.alignRight : styles.alignLeft]}
-    >
-      <View
-        style={[
-          styles.bubble,
-          {
-            backgroundColor: isUser
-              ? theme.userBubbleColor
-              : theme.botBubbleColor,
-            borderRadius: theme.borderRadius || 8,
-            borderBottomRightRadius: isUser ? 0 : theme.borderRadius,
-            borderBottomLeftRadius: isUser ? theme.borderRadius : 0,
-          },
-        ]}
-      >
-        <Text
-          style={[
-            styles.text,
-            {
-              color: isUser ? theme.userTextColor : theme.botTextColor,
-              fontFamily: theme.fontFamily,
-              fontSize: theme.fontSize,
-            },
-          ]}
-        >
+    <Container theme={theme} userTheme={userTheme} isUser={isUser}>
+      <BubbleContainer theme={theme} userTheme={userTheme} isUser={isUser}>
+        <MessageText isUser={isUser} userTheme={userTheme} theme={theme}>
           {message.text || ""}
-          {message.role === "assistant" && hasResults && typeof totalResults === "number" ? (
-            ` Found ${Number(totalResults).toLocaleString()} diamonds (showing first ${shownResults})`
-          ) : null}
-        </Text>
+          {message.role === "assistant" &&
+          hasResults &&
+          typeof totalResults === "number"
+            ? ` Found ${Number(
+                totalResults
+              ).toLocaleString()} diamonds (showing first ${shownResults})`
+            : null}
+        </MessageText>
         {message.role === "assistant" &&
           Array.isArray(message.suggestions) &&
           message.suggestions.length > 0 &&
           isLatest &&
           !isTyping &&
-          !(message.search_payload &&
+          !(
+            message.search_payload &&
             typeof message.search_payload === "object" &&
-            Object.keys(message.search_payload).length > 0) && (
-            <View style={styles.suggestionsWrapper}>
+            Object.keys(message.search_payload).length > 0
+          ) && (
+            <SuggestionsWrapper theme={theme}>
               <SuggestionsRow
                 suggestions={message.suggestions}
                 onSelect={(v) => onSuggestionSelect?.(v)}
                 variant="inline"
               />
-            </View>
+            </SuggestionsWrapper>
           )}
-      </View>
-  </View>
-)};
+      </BubbleContainer>
+    </Container>
+  );
+};
 
 // Memoize to prevent re-renders when parent re-renders
 export const MessageBubble = memo(MessageBubbleComponent);
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 8,
-    marginVertical: 0,
-    width: "100%",
-  },
-  
-  alignRight: {
-    alignItems: "flex-end",
-  },
-  alignLeft: {
-    alignItems: "flex-start",
-  },
-  bubble: {
-    maxWidth: "80%",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  text: {
-    lineHeight: 20,
-  },
-  resultsInfo: {
-    marginTop: 4,
-    fontSize: 12,
-    color: "#666",
-  },
-  suggestionsWrapper: {
-    marginTop: 8,
-  },
-});
+const Container = styled.View<{
+  theme: DefaultTheme;
+  userTheme: ChatTheme;
+  isUser: Boolean;
+}>`
+  padding-horizontal: 8px;
+  margin-vertical: 0;
+  width: 100%;
+  ${({ isUser }: { isUser: Boolean }) =>
+    isUser
+      ? css`
+          align-items: flex-end;
+        `
+      : css`
+          align-items: flex-start;
+        `}
+`;
+
+const BubbleContainer = styled.View<{
+  theme: DefaultTheme;
+  userTheme: ChatTheme;
+  isUser: Boolean;
+}>`
+  max-width: 80%;
+  padding-horizontal: 12px;
+  padding-vertical: 8px;
+  background-color: ${({
+    userTheme,
+    theme,
+    isUser,
+  }: {
+    userTheme: ChatTheme;
+    theme: DefaultTheme;
+    isUser: Boolean;
+  }) =>
+    isUser
+      ? theme["core-06"] || userTheme.userBubbleColor || "#EDEDF2"
+      : theme["core-02"] || userTheme.botBubbleColor || "#EDEDF2"};
+  border-radius: ${({ userTheme }: { userTheme: ChatTheme }) =>
+    userTheme.borderRadius || 8}px;
+  border-bottom-right-radius: ${({
+    isUser,
+    userTheme,
+  }: {
+    isUser: Boolean;
+    userTheme: ChatTheme;
+  }) => (isUser ? 0 : userTheme.borderRadius)}px;
+  border-bottom-left-radius: ${({
+    isUser,
+    userTheme,
+  }: {
+    isUser: Boolean;
+    userTheme: ChatTheme;
+  }) => (isUser ? userTheme.borderRadius : 0)}px;
+`;
+
+const MessageText = styled.Text<{
+  theme: DefaultTheme;
+  userTheme: ChatTheme;
+  isUser: Boolean;
+}>`
+  color: ${({
+    userTheme,
+    theme,
+    isUser,
+  }: {
+    userTheme: ChatTheme;
+    theme: DefaultTheme;
+    isUser: Boolean;
+  }) =>
+    isUser
+      ? theme["core-01"] || userTheme.userTextColor || "#FFFFFF"
+      : theme["core-05"] || userTheme.botTextColor || "#000000"};
+  font-family: ${({ userTheme }: { userTheme: ChatTheme }) =>
+    userTheme.fontFamily || "Roboto"};
+  font-size: ${({ userTheme }: { userTheme: ChatTheme }) =>
+    userTheme.fontSize || 16}px;
+  line-height: 20px;
+`;
+
+const SuggestionsWrapper = styled.View<{
+  theme: DefaultTheme;
+}>`
+  margin-top: 8px;
+`;

package/src/components/MessageMetaRow.tsx

@@ -1,15 +1,11 @@
 import React from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  Image,
-  Platform,
-  ActivityIndicator,
-  Pressable,
-} from "react-native";
+import { View, StyleSheet, Image, Platform } from "react-native";
 import type { ChatMessage } from "../types";
 import { FeedbackAction, fetchConversationId, formatToTime } from "./utils";
+import { useTheme } from "styled-components/native";
+import styled from "styled-components/native";
+import { DefaultTheme } from "styled-components/native";
+import { css } from "styled-components/native";
 
 let ImageComponent: typeof Image = Image;
 if (Platform.OS !== "web") {
@@ -36,10 +32,8 @@ export const MessageMetaRow: React.FC<Props> = ({
   message,
   priceMode,
   handleFeedbackAction,
-  onReloadResults,
-  reloading,
-  hasResults,
 }) => {
+  const theme = useTheme();
   const isUser = message.role === "user";
   const [conversationId, setConversationId] = React.useState<string | null>(
     null
@@ -71,16 +65,14 @@ export const MessageMetaRow: React.FC<Props> = ({
       ]}
     >
       <View style={styles.timeContainer}>
-        <Text style={styles.timeText}>{formatToTime(message.createdAt)}</Text>
+        <TimeText theme={theme}>{formatToTime(message.createdAt)}</TimeText>
       </View>
       {canFeedback ? (
         <View style={styles.likeDislikeContainer}>
-          <Pressable
-            style={(state: any) => [
-              styles.borderButton,
-              state?.hovered && styles.borderButtonHover,
-              message.reaction === FeedbackAction.LIKE && styles.borderButtonLike,
-            ]}
+          <LikeButton
+            type="like"
+            style={(state: any) => [state?.hovered && styles.borderButtonHover]}
+            reaction={message.reaction}
             onPress={() =>
               handleFeedbackAction(
                 FeedbackAction.LIKE,
@@ -91,17 +83,24 @@ export const MessageMetaRow: React.FC<Props> = ({
             disabled={!canFeedback}
           >
             <ImageComponent
-              source={{ uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/like.svg" }}
+              source={{
+                uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/like.svg",
+              }}
               resizeMode="contain"
-              style={{ width: 20, height: 20, tintColor: message.reaction === FeedbackAction.LIKE ?"#00B140" : "#020001" }}
+              style={{
+                width: 20,
+                height: 20,
+                tintColor:
+                  message.reaction === FeedbackAction.LIKE
+                    ? theme["success-01"] || "#00B140"
+                    : theme["core-05"] || "#020001",
+              }}
             />
-          </Pressable>
-          <Pressable
-            style={(state: any) => [
-              styles.borderButton,
-              state?.hovered && styles.borderButtonHover,
-              message.reaction === FeedbackAction.DISLIKE && styles.borderButtonDislike,
-            ]}
+          </LikeButton>
+          <LikeButton
+            type="dislike"
+            style={(state: any) => [state?.hovered && styles.borderButtonHover]}
+            reaction={message.reaction}
             onPress={() =>
               handleFeedbackAction(
                 FeedbackAction.DISLIKE,
@@ -112,11 +111,20 @@ export const MessageMetaRow: React.FC<Props> = ({
             disabled={!canFeedback}
           >
             <ImageComponent
-              source={{ uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/dislike.svg" }}
+              source={{
+                uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/dislike.svg",
+              }}
               resizeMode="contain"
-              style={{ width: 20, height: 20, tintColor: message.reaction === FeedbackAction.DISLIKE ? "#D0021B" : "#020001" }}
+              style={{
+                width: 20,
+                height: 20,
+                tintColor:
+                  message.reaction === FeedbackAction.DISLIKE
+                    ? theme["error-01"] || "#D0021B"
+                    : theme["core-05"] || "#020001",
+              }}
             />
-          </Pressable>
+          </LikeButton>
         </View>
       ) : null}
       {/* {message.search_payload &&
@@ -149,6 +157,47 @@ export const MessageMetaRow: React.FC<Props> = ({
   );
 };
 
+const LikeButton = styled.Pressable<{
+  theme: DefaultTheme;
+  reaction: FeedbackAction;
+  type: "like" | "dislike";
+}>`
+  border-width: 1;
+  border-radius: 8px;
+  padding-horizontal: 4px;
+  padding-vertical: 4px;
+  ${({
+    reaction,
+    type,
+  }: {
+    reaction: FeedbackAction;
+    type: "like" | "dislike";
+  }) =>
+    reaction === FeedbackAction.LIKE && type === "like"
+      ? css`
+          background-color: ${({ theme }: { theme: DefaultTheme }) =>
+            theme["success-02"] || "#DBFFE4"};
+          border-color: ${({ theme }: { theme: DefaultTheme }) =>
+            theme["success-01"] || "#00B140"};
+        `
+      : reaction === FeedbackAction.DISLIKE && type === "dislike"
+      ? css`
+          background-color: ${({ theme }: { theme: DefaultTheme }) =>
+            theme["error-02"] || "#FFE2E0"};
+          border-color: ${({ theme }: { theme: DefaultTheme }) =>
+            theme["error-01"] || "#D0021B"};
+        `
+      : css`
+          border-color: ${({ theme }: { theme: DefaultTheme }) =>
+            theme["core-03"] || "#D5D5DC"};
+        `}
+`;
+
+const TimeText = styled.Text<{ theme: DefaultTheme }>`
+  font-size: 12px;
+  color: ${({ theme }: { theme: DefaultTheme }) => theme["core-06"] || "#666"};
+`;
+
 const styles = StyleSheet.create({
   rowContainer: {
     flexDirection: "row",
@@ -172,28 +221,9 @@ const styles = StyleSheet.create({
   timeContainer: {
     margin: 0,
   },
-  borderButton: {
-    borderWidth: 1,
-    borderColor: "#D5D5DC",
-    borderRadius: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-  },
   borderButtonHover: {
     backgroundColor: "#EDEDF2",
   },
-  borderButtonLike: {
-    backgroundColor: "#DBFFE4",
-    borderColor: "#00B140",
-  },
-  borderButtonDislike: {
-    backgroundColor: "#FFE2E0",
-    borderColor: "#D0021B",
-  },
-  timeText: {
-    fontSize: 12,
-    color: "#666",
-  },
 });
 
 export default MessageMetaRow;