vdb-ai-chat 1.0.78 → 1.0.80

package/src/components/ChatInput.tsx

@@ -1,20 +1,29 @@
-import React from "react";
-import { TextInput, StyleSheet, Platform, Image } from "react-native";
+import React, { useRef, useState, useCallback, useEffect } from "react";
+import { TextInput, StyleSheet, Platform } 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";
 import { useTranslation } from "../i18n";
+import { VDBIcons } from "./icons/VDBIcons";
+import { IconsVariant, VDBIcon } from "./icons";
+import {
+  transcribeAudio,
+  TranscribeError,
+  type TranscribeAudioFile,
+  type TranscribeResponse,
+} from "../api";
 
-// 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 {
-    ImageComponent = Image;
-  }
+const stripMimeParams = (m: string): string => {
+  if (!m) return m;
+  const i = m.indexOf(";");
+  return (i >= 0 ? m.slice(0, i) : m).trim();
+};
+
+let ExpoAudio: any = null;
+try {
+  ExpoAudio = require("expo-av").Audio;
+} catch {
 }
 
 interface Props {
@@ -25,34 +34,12 @@ interface Props {
   placeholder?: string;
   theme: ChatTheme;
   inputRef?: React.RefObject<TextInput>;
+  apiUrl?: string;
+  conversationId?: string | number;
+  priceMode?: string | null;
+  onTranscribeError?: (error: Error, message: string) => void;
 }
 
-const SendIcon = ({
-  disabled,
-  isEmpty,
-}: {
-  disabled?: boolean;
-  isEmpty: boolean;
-}) => {
-  const isInactive = disabled || isEmpty;
-  const theme = useTheme();
-  return (
-    <ImageComponent
-      source={{
-        uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/send.svg",
-      }}
-      resizeMode="contain"
-      style={{
-        ...styles.buttonIcon,
-        tintColor: isInactive
-          ? theme["core-04"] || "#ACACB3"
-          : theme["core-05"] || "#020001",
-        cursor: isInactive ? "auto" : "pointer",
-      }}
-    />
-  );
-};
-
 export const ChatInput: React.FC<Props> = ({
   value,
   onChangeText,
@@ -60,38 +47,326 @@ export const ChatInput: React.FC<Props> = ({
   disabled,
   placeholder,
   inputRef,
+  apiUrl,
+  conversationId,
+  priceMode,
+  onTranscribeError,
 }) => {
   const theme = useTheme();
   const { t } = useTranslation();
-  return (
-    <InputContainer theme={theme}>
-      <Input
-        ref={inputRef}
-        // @ts-ignore - supported on web via react-native-web
-        id="chat-input"
-        style={[styles.inputWeb]}
-        autoComplete="off"
-        placeholder={
-          placeholder ||
-          t(
-            "chat.placeholder.text",
-            "Describe the diamond you're looking for...",
-          )
+
+  const [isRecording, setIsRecording] = useState(false);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [transcribeErrorMsg, setTranscribeErrorMsg] = useState<string | null>(
+    null,
+  );
+
+  const mediaRecorderRef = useRef<any>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+
+  const expoRecordingRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!transcribeErrorMsg) return;
+    const timer = setTimeout(() => setTranscribeErrorMsg(null), 5000);
+    return () => clearTimeout(timer);
+  }, [transcribeErrorMsg]);
+
+  const handleTranscribeFailure = useCallback(
+    (err: unknown) => {
+      const asError =
+        err instanceof Error ? err : new Error(String(err ?? "Unknown error"));
+
+      let userMessage = t(
+        "chat.transcribeError.text",
+        "Couldn't transcribe your recording. Please try again.",
+      );
+
+      if (err instanceof TranscribeError) {
+        if (err.errorCode && err.message) {
+          userMessage = err.message ?? t(
+            "chat.transcribeError.failed",
+            "Transcription failed. Please try recording again.",
+          );
+        } else if (err.status === 401 || err.status === 403) {
+          userMessage = t(
+            "chat.transcribeError.auth",
+            "You're not signed in. Please sign in and try again.",
+          );
+        } else if (err.status >= 500) {
+          userMessage = t(
+            "chat.transcribeError.server",
+            "Server error while transcribing. Please try again shortly.",
+          );
         }
-        placeholderTextColor={theme["core-06"] || "#999"}
-        value={value}
-        onChangeText={onChangeText}
-        onSubmitEditing={onSend}
-        editable={!disabled}
-        autoFocus={!theme.isTablet}
-      />
-      <SendButton onPress={onSend} disabled={disabled}>
-        <SendIcon disabled={disabled} isEmpty={value.trim() === ""} />
-      </SendButton>
-    </InputContainer>
+      }
+
+      console.error("Failed to transcribe audio", err);
+      setTranscribeErrorMsg(userMessage);
+      onTranscribeError?.(asError, userMessage);
+    },
+    [t, onTranscribeError],
+  );
+
+  const transcribeAndAppend = useCallback(
+    async (file: TranscribeAudioFile, fileName: string, mimeType: string) => {
+      if (!apiUrl) return;
+      setIsTranscribing(true);
+      setTranscribeErrorMsg(null);
+      try {
+        const sanitizedMime = stripMimeParams(mimeType);
+        const data: TranscribeResponse = await transcribeAudio(apiUrl, file, {
+          conversationId,
+          priceMode,
+          fileName,
+          mimeType: sanitizedMime,
+        });
+        const transcript = data?.transcript ?? "";
+        if (transcript) {
+          onChangeText(value ? `${value} ${transcript}` : transcript);
+        }
+      } catch (err) {
+        handleTranscribeFailure(err);
+      } finally {
+        setIsTranscribing(false);
+      }
+    },
+    [
+      apiUrl,
+      conversationId,
+      priceMode,
+      value,
+      onChangeText,
+      handleTranscribeFailure,
+    ],
+  );
+
+  const startWebRecording = useCallback(async () => {
+    try {
+      const stream = await (navigator as any).mediaDevices.getUserMedia({
+        audio: true,
+      });
+      const preferredTypes = [
+        "audio/webm;codecs=opus",
+        "audio/webm",
+        "audio/ogg;codecs=opus",
+        "audio/mp4",
+      ];
+      const MR: any = (window as any).MediaRecorder;
+      const supportedType =
+        preferredTypes.find((tpe) => MR?.isTypeSupported?.(tpe)) || "";
+
+      const mediaRecorder = supportedType
+        ? new MR(stream, { mimeType: supportedType })
+        : new MR(stream);
+      mediaRecorderRef.current = mediaRecorder;
+      audioChunksRef.current = [];
+
+      mediaRecorder.ondataavailable = (e: any) => {
+        if (e.data && e.data.size > 0) audioChunksRef.current.push(e.data);
+      };
+
+      mediaRecorder.onstop = async () => {
+        stream.getTracks().forEach((track: any) => track.stop());
+        const chunkType =
+          mediaRecorder.mimeType ||
+          audioChunksRef.current[0]?.type ||
+          "audio/webm";
+        const audioBlob = new Blob(audioChunksRef.current, { type: chunkType });
+        const ext = chunkType.includes("mp4")
+          ? "mp4"
+          : chunkType.includes("ogg")
+            ? "ogg"
+            : "webm";
+        await transcribeAndAppend(
+          audioBlob,
+          `recording-${Date.now()}.${ext}`,
+          chunkType,
+        );
+      };
+
+      mediaRecorder.start();
+      setIsRecording(true);
+      setTranscribeErrorMsg(null);
+    } catch (err) {
+      console.error("Failed to start web recording", err);
+      setTranscribeErrorMsg(
+        t(
+          "chat.recordError.text",
+          "Microphone access failed. Please check permissions.",
+        ),
+      );
+    }
+  }, [transcribeAndAppend, t]);
+
+  const stopWebRecording = useCallback(() => {
+    if (mediaRecorderRef.current) {
+      mediaRecorderRef.current.stop();
+      mediaRecorderRef.current = null;
+      setIsRecording(false);
+    }
+  }, []);
+
+  const startNativeRecording = useCallback(async () => {
+    if (!ExpoAudio) return;
+    try {
+      const { granted } = await ExpoAudio.requestPermissionsAsync();
+      if (!granted) {
+        setTranscribeErrorMsg(
+          t(
+            "chat.recordError.permission",
+            "Microphone permission was denied.",
+          ),
+        );
+        return;
+      }
+
+      await ExpoAudio.setAudioModeAsync({
+        allowsRecordingIOS: true,
+        playsInSilentModeIOS: true,
+      });
+
+      const { recording } = await ExpoAudio.Recording.createAsync(
+        ExpoAudio.RecordingOptionsPresets.HIGH_QUALITY,
+      );
+      expoRecordingRef.current = recording;
+      setIsRecording(true);
+      setTranscribeErrorMsg(null);
+    } catch (err) {
+      console.error("Failed to start native recording", err);
+      setTranscribeErrorMsg(
+        t(
+          "chat.recordError.text",
+          "Microphone access failed. Please check permissions.",
+        ),
+      );
+    }
+  }, [t]);
+
+  const stopNativeRecording = useCallback(async () => {
+    const recording = expoRecordingRef.current;
+    if (!recording) return;
+
+    try {
+      await recording.stopAndUnloadAsync();
+      await ExpoAudio.setAudioModeAsync({ allowsRecordingIOS: false });
+
+      const uri = recording.getURI();
+      expoRecordingRef.current = null;
+      setIsRecording(false);
+
+      if (uri) {
+        const fileName = `recording-${Date.now()}.m4a`;
+        await transcribeAndAppend(
+          { uri, name: fileName, type: "audio/m4a" },
+          fileName,
+          "audio/m4a",
+        );
+      }
+    } catch (err) {
+      console.error("Failed to stop native recording", err);
+      expoRecordingRef.current = null;
+      setIsRecording(false);
+    }
+  }, [transcribeAndAppend]);
+
+  const startRecording = useCallback(() => {
+    if (Platform.OS === "web") {
+      return startWebRecording();
+    }
+    return startNativeRecording();
+  }, [startWebRecording, startNativeRecording]);
+
+  const stopRecording = useCallback(() => {
+    if (Platform.OS === "web") {
+      stopWebRecording();
+    } else {
+      stopNativeRecording();
+    }
+  }, [stopWebRecording, stopNativeRecording]);
+
+  const handleMicPress = useCallback(() => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  }, [isRecording, startRecording, stopRecording]);
+
+  const isMicAvailable =
+    !!apiUrl && (Platform.OS === "web" || !!ExpoAudio);
+
+  const isSendDisabled = disabled || isRecording || isTranscribing;
+
+  return (
+    <InputWrapper>
+      <InputContainer theme={theme}>
+        <Input
+          ref={inputRef}
+          id="chat-input"
+          style={[styles.inputWeb]}
+          autoComplete="off"
+          placeholder={
+            placeholder ||
+            t(
+              "chat.placeholder.text",
+              "Describe the diamond you're looking for...",
+            )
+          }
+          placeholderTextColor={theme["core-06"] || "#999"}
+          value={value}
+          onChangeText={onChangeText}
+          onSubmitEditing={onSend}
+          editable={!isSendDisabled}
+          autoFocus={!theme.isTablet}
+        />
+        {isMicAvailable && (
+          <MicButton onPress={handleMicPress} disabled={isTranscribing}>
+            <VDBIcon
+              color={
+                isTranscribing
+                  ? theme["core-04"] || "#ACACB3"
+                  : isRecording
+                    ? theme["error-01"] || "#FF0000"
+                    : theme["core-05"] || "#020001"
+              }
+              size={24}
+              variant={IconsVariant.VDBCustom}
+              name={isRecording ? VDBIcons.STOP_CIRCLE : VDBIcons.MIC}
+            />
+          </MicButton>
+        )}
+        <SendButton onPress={onSend} disabled={isSendDisabled}>
+          <VDBIcon
+            color={
+              isSendDisabled || value.trim() === ""
+                ? theme["core-04"]
+                : theme["core-05"]
+            }
+            size={24}
+            variant={IconsVariant.VDBCustom}
+            name={VDBIcons.SEND}
+          />
+        </SendButton>
+      </InputContainer>
+      {transcribeErrorMsg ? (
+        <ErrorBanner
+          accessibilityRole="alert"
+          onPress={() => setTranscribeErrorMsg(null)}
+        >
+          <ErrorText theme={theme} numberOfLines={2}>
+            {transcribeErrorMsg}
+          </ErrorText>
+        </ErrorBanner>
+      ) : null}
+    </InputWrapper>
   );
 };
 
+const InputWrapper = styled.View`
+  align-self: stretch;
+`;
+
 const InputContainer = styled.View<{ theme: DefaultTheme }>`
   flex-direction: row;
   padding-horizontal: 12px;
@@ -108,6 +383,18 @@ const InputContainer = styled.View<{ theme: DefaultTheme }>`
   height: 56px;
 `;
 
+const ErrorBanner = styled.TouchableOpacity`
+  margin-top: 6px;
+  align-self: stretch;
+`;
+
+const ErrorText = styled.Text<{ theme: DefaultTheme }>`
+  font-size: 12px;
+  line-height: 16px;
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["error-01"] || "#FF0000"};
+`;
+
 const Input = styled.TextInput<{ theme: DefaultTheme }>`
   flex: 1;
   color: ${({ theme }: { theme: DefaultTheme }) =>
@@ -137,31 +424,21 @@ const SendButton = styled.TouchableOpacity<{ theme: DefaultTheme }>`
     theme["core-01"] || "#FFFFFF"};
 `;
 
+const MicButton = styled.TouchableOpacity<{ theme: DefaultTheme }>`
+  margin-right: 16px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  height: 24;
+  aspect-ratio: 1;
+  border-radius: 0px;
+  background-color: transparent;
+`;
+
 const styles = StyleSheet.create({
-  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,
-  },
   inputWeb: {
     ...(Platform.OS === "web"
       ? ({ outlineStyle: "none", outlineWidth: 0, boxShadow: "none" } as any)
       : {}),
   },
-  buttonIcon: {
-    height: 24,
-    width: 24,
-  },
-  sendIconText: {
-    fontSize: 18,
-    fontWeight: "700",
-    textAlign: "center",
-  },
 });

package/src/components/ChatWidget.tsx

@@ -1402,6 +1402,8 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
             placeholder={placeholder}
             theme={themeProps}
             inputRef={inputRef}
+            apiUrl={apiUrl}
+            priceMode={priceMode}
           />
           <BetaNotice active={betaActive} />
         </BottomContainer>
@@ -1583,6 +1585,13 @@ export const ChatWidget = forwardRef<ChatWidgetRef, ChatWidgetProps>(
                             onSuggestionSelect={handleSuggestionSelect}
                             isLatest={isLatest}
                             isTyping={typingMessageId === item.id}
+                            showShowResultsButton={
+                              fromFilterScreen &&
+                              item.role === "assistant" &&
+                              item.search_payload &&
+                              Object.keys(item.search_payload).length > 0
+                            }
+                            onViewAll={onViewAll}
                           />
                           {/* Trigger product fetch when this area enters viewport */}
                           {item.role === "assistant" &&

package/src/components/MessageBubble.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import SuggestionsRow from "./SuggestionsRow";
 import type { ChatMessage, ChatTheme } from "../types";
 import { useTheme } from "styled-components/native";
@@ -28,6 +28,8 @@ interface Props {
   onSuggestionSelect?: (value: string) => void;
   isLatest?: boolean;
   isTyping?: boolean;
+  showShowResultsButton?: boolean;
+  onViewAll?: (item: any) => void;
 }
 
 const MessageBubbleComponent: React.FC<Props> = ({
@@ -39,6 +41,8 @@ const MessageBubbleComponent: React.FC<Props> = ({
   onSuggestionSelect,
   isLatest,
   isTyping,
+  showShowResultsButton,
+  onViewAll,
 }) => {
   const { t } = useTranslation();
   const isUser = message.role === "user";
@@ -63,6 +67,9 @@ const MessageBubbleComponent: React.FC<Props> = ({
     Number(totalResults) > 1 ? t("product.pluralSuffix.text", "s") : "";
   const labelProductName = baseProductName + pairSuffix + pluralSuffix;
 
+  const handleViewAllPress = () => {
+    onViewAll?.(message);
+  };
   const renderWords = (text: string, isBold: boolean, keyPrefix: string) =>
     text
       .trim()
@@ -145,6 +152,13 @@ const MessageBubbleComponent: React.FC<Props> = ({
             <MessageText isUser={isUser} isBold={true} theme={theme}>
               {`${generateSavedSearchName(message.search_payload, true, t)?.title}`}
             </MessageText>
+            {showShowResultsButton && (
+              <ShowResultsButton onPress={handleViewAllPress}>
+                <ShowResultsText theme={theme}>
+                  {t("chat.showResults.button", "Show Results")}
+                </ShowResultsText>
+              </ShowResultsButton>
+            )}
           </>
         ) : message.role === "assistant" &&
           message?.search_payload &&
@@ -311,3 +325,15 @@ const InlineContainer = styled.View`
   align-items: center;
   flex-wrap: wrap;
 `;
+
+const ShowResultsButton = styled.TouchableOpacity`
+  margin-top: 4px;
+`;
+
+const ShowResultsText = styled.Text<{ theme: DefaultTheme }>`
+  color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["link-static"] || "#3378f6"};
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Roboto-Medium;
+`;

package/src/components/icons/VDBCustomIcon.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+
+const selectionJsonUrl = "https://cdn.vdbapp.com/vdb2/icons/selection.json";
+const iconMoonIconUrl = "https://cdn.vdbapp.com/vdb2/icons/icomoon.ttf";
+
+let createIconSetFromIcoMoon: any = null;
+try {
+  const mod = require("@expo/vector-icons/build/createIconSetFromIcoMoon");
+  createIconSetFromIcoMoon = mod?.default ?? mod;
+} catch {
+}
+
+let axiosLib: any = null;
+try {
+  axiosLib = require("axios");
+} catch {
+}
+
+let cachedIconSet: any = null;
+let cachedPromise: Promise<any> | null = null;
+
+const loadSelectionJson = async (): Promise<any> => {
+  if (axiosLib) {
+    const res = await (axiosLib.default || axiosLib).get(selectionJsonUrl);
+    return res?.data;
+  }
+  const res = await fetch(selectionJsonUrl);
+  return res.json();
+};
+
+export interface VDBCustomIconProps {
+  name: string;
+  size?: number;
+  color?: string;
+  style?: any;
+  [key: string]: any;
+}
+
+const VDBCustomIcon: React.FC<VDBCustomIconProps> = (props) => {
+  const [, setReady] = useState(false);
+
+  useEffect(() => {
+    if (cachedIconSet || !createIconSetFromIcoMoon) return;
+
+    if (!cachedPromise) {
+      cachedPromise = loadSelectionJson()
+        .then((data) => {
+          if (data && data.icons) {
+            cachedIconSet = createIconSetFromIcoMoon(
+              data,
+              "vdb",
+              iconMoonIconUrl,
+            );
+          } else {
+            console.error("Invalid IcoMoon JSON: missing 'icons' array");
+          }
+        })
+        .catch((err) => {
+          console.error("VDBCustomIcon: failed to load icon set", err);
+        });
+    }
+
+    cachedPromise.then(() => {
+      setReady((r) => !r);
+    });
+  }, []);
+
+  if (!cachedIconSet) return null;
+
+  const IconSet = cachedIconSet;
+  return <IconSet {...props} />;
+};
+
+export default VDBCustomIcon;