agora-appbuilder-core 4.1.7-beta.8 → 4.1.8-beta.1

package/template/src/components/stt-transcript/STTTranscriptTable.tsx

@@ -0,0 +1,295 @@
+import React from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+import Tooltip from '../../atoms/Tooltip';
+import Clipboard from '../../subComponents/Clipboard';
+import Spacer from '../../atoms/Spacer';
+import {style} from '../recordings/style';
+import {TableBody, TableFooter, TableHeader} from '../common/data-table';
+import {
+  FetchSTTTranscriptResponse,
+  useFetchSTTTranscript,
+} from './useFetchSTTTranscript';
+import {
+  capitalizeFirstLetter,
+  downloadS3Link,
+  getFormattedDateTime,
+} from '../../utils/common';
+import IconButtonWithToolTip from '../../atoms/IconButton';
+import ImageIcon from '../../atoms/ImageIcon';
+import Loading from '../../subComponents/Loading';
+import GenericPopup from '../common/GenericPopup';
+import PlatformWrapper from '../../utils/PlatformWrapper';
+
+const headers = ['Date', 'Time', 'Status', 'Actions'];
+
+interface STTItemRowProps {
+  item: FetchSTTTranscriptResponse['stts'][0];
+  onDeleteAction: (id: string) => void;
+  onDownloadAction: (link: string) => void;
+}
+
+function STTItemRow({item, onDeleteAction, onDownloadAction}: STTItemRowProps) {
+  const [date, time] = getFormattedDateTime(item.created_at);
+  const sttStatus = item.status;
+
+  if (
+    sttStatus === 'STOPPING' ||
+    sttStatus === 'STARTED' ||
+    (sttStatus === 'INPROGRESS' && !item?.download_url)
+  ) {
+    return (
+      <View key={item.id} style={style.pt12}>
+        <View style={[style.infotextContainer, style.captionContainer]}>
+          <ImageIcon
+            iconSize={20}
+            iconType="plain"
+            name="info"
+            tintColor={$config.SEMANTIC_NEUTRAL}
+          />
+          <Text style={[style.captionText]}>
+            Current STT is ongoing. Once the meeting concludes, we'll generate
+            the link
+          </Text>
+        </View>
+      </View>
+    );
+  }
+  return (
+    <View style={style.tbrow} key={item.id}>
+      <View style={[style.td, style.plzero]}>
+        <Text style={style.ttime}>{date}</Text>
+      </View>
+      <View style={[style.td]}>
+        <Text style={style.ttime}>{time}</Text>
+      </View>
+      <View style={[style.td]}>
+        <Text style={style.ttime}>{capitalizeFirstLetter(sttStatus)}</Text>
+      </View>
+      <View style={style.td}>
+        {!item.download_url ? (
+          <View style={[style.tactions, {marginTop: 0}]}>
+            <Text style={style.placeHolder}>{'No transcripts found'}</Text>
+          </View>
+        ) : item?.download_url?.length > 0 ? (
+          <View style={style.tactions}>
+            <View>
+              {item?.download_url?.map((link: string, i: number) => (
+                <View
+                  key={i}
+                  style={[
+                    style.tactions,
+                    //if stts contains multiple parts then we need to add some space each row
+                    i >= 1 ? {marginTop: 8} : {},
+                  ]}>
+                  <View>
+                    <IconButtonWithToolTip
+                      hoverEffect={true}
+                      hoverEffectStyle={style.iconButtonHoverEffect}
+                      containerStyle={style.iconButton}
+                      iconProps={{
+                        name: 'download',
+                        iconType: 'plain',
+                        iconSize: 20,
+                        tintColor: `${$config.SECONDARY_ACTION_COLOR}`,
+                      }}
+                      onPress={() => {
+                        onDownloadAction(link);
+                      }}
+                    />
+                  </View>
+                  <View style={[style.pl10]}>
+                    <Tooltip
+                      isClickable
+                      placement="left"
+                      toolTipMessage="Link Copied"
+                      onPress={() => {
+                        Clipboard.setString(link);
+                      }}
+                      toolTipIcon={
+                        <>
+                          <ImageIcon
+                            iconType="plain"
+                            name="tick-fill"
+                            tintColor={$config.SEMANTIC_SUCCESS}
+                            iconSize={20}
+                          />
+                          <Spacer size={8} horizontal={true} />
+                        </>
+                      }
+                      fontSize={12}
+                      renderContent={() => {
+                        return (
+                          <PlatformWrapper>
+                            {(isHovered: boolean) => (
+                              <TouchableOpacity
+                                style={[
+                                  isHovered ? style.iconButtonHoverEffect : {},
+                                  style.iconShareLink,
+                                ]}
+                                onPress={() => {
+                                  Clipboard.setString(link);
+                                }}>
+                                <ImageIcon
+                                  iconType="plain"
+                                  name="copy-link"
+                                  iconSize={20}
+                                  tintColor={$config.SECONDARY_ACTION_COLOR}
+                                />
+                              </TouchableOpacity>
+                            )}
+                          </PlatformWrapper>
+                        );
+                      }}
+                    />
+                  </View>
+                  <View style={[style.pl10]}>
+                    <IconButtonWithToolTip
+                      hoverEffect={true}
+                      hoverEffectStyle={style.iconButtonHoverEffect}
+                      containerStyle={style.iconButton}
+                      iconProps={{
+                        name: 'delete',
+                        iconType: 'plain',
+                        iconSize: 20,
+                        tintColor: `${$config.SEMANTIC_ERROR}`,
+                      }}
+                      onPress={() => {
+                        //show confirmation popup
+                        onDeleteAction && onDeleteAction(item.id);
+                      }}
+                    />
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        ) : (
+          <View style={(style.tactions, {marginTop: 0})}>
+            <Text style={style.placeHolder}>No transcripts found</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+function EmptyTranscriptState() {
+  return (
+    <View style={style.infotextContainer}>
+      <View>
+        <ImageIcon
+          iconType="plain"
+          name="info"
+          tintColor={'#777777'}
+          iconSize={32}
+        />
+      </View>
+      <View>
+        <Text style={[style.infoText, style.pt10, style.pl10]}>
+          No transcripts found for this meeting
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function ErrorTranscriptState(message: any) {
+  return <Text style={[style.ttime, style.pv10, style.ph20]}>{message}</Text>;
+}
+
+function STTTranscriptTable() {
+  const {
+    status,
+    stts,
+    pagination,
+    error,
+    currentPage,
+    setCurrentPage,
+    deleteTranscript,
+  } = useFetchSTTTranscript();
+
+  // id of STT transcript to delete
+  const [sttIdToDelete, setSTTIdToDelete] = React.useState<string | undefined>(
+    undefined,
+  );
+
+  // message for any download‐error popup
+  const [downloadError, setDownloadError] = React.useState<
+    string | undefined
+  >();
+
+  if (status === 'rejected') {
+    return <ErrorTranscriptState message={error?.message} />;
+  }
+
+  const onDeleteSTTRecord = async () => {
+    try {
+      await deleteTranscript(sttIdToDelete!);
+    } catch (err: any) {
+      setDownloadError(err.message);
+    } finally {
+      setSTTIdToDelete(undefined);
+    }
+  };
+
+  return (
+    <>
+      <View style={style.ttable}>
+        <TableHeader columns={headers} />
+        <TableBody
+          status={status}
+          items={stts}
+          loadingComponent={
+            <Loading background="transparent" text="Fetching transcripts.." />
+          }
+          renderRow={item => (
+            <STTItemRow
+              key={item.id}
+              item={item}
+              onDeleteAction={id => {
+                setSTTIdToDelete(id);
+              }}
+              onDownloadAction={link => {
+                downloadS3Link(link).catch((err: Error) => {
+                  setDownloadError(err.message || 'Download failed');
+                });
+              }}
+            />
+          )}
+          emptyComponent={<EmptyTranscriptState />}
+        />
+        <TableFooter
+          currentPage={currentPage}
+          onPageChange={setCurrentPage}
+          pagination={pagination}
+        />
+      </View>
+      {sttIdToDelete && (
+        <GenericPopup
+          title="Delete ? "
+          variant="error"
+          message="Are you sure want to delete the transcript ? This action can't be undone."
+          visible={!!sttIdToDelete}
+          setVisible={() => setSTTIdToDelete(undefined)}
+          onConfirm={onDeleteSTTRecord}
+          onCancel={() => {
+            setSTTIdToDelete(undefined);
+          }}
+        />
+      )}
+      {/** DOWNLOAD ERROR POPUP **/}
+      {downloadError && (
+        <GenericPopup
+          title="Download Error"
+          variant="error"
+          message={downloadError}
+          visible={true}
+          setVisible={() => setDownloadError(undefined)}
+          onConfirm={() => setDownloadError(undefined)}
+        />
+      )}
+    </>
+  );
+}
+
+export default STTTranscriptTable;

package/template/src/components/stt-transcript/ViewSTTTranscriptModal.tsx

@@ -0,0 +1,44 @@
+import React, {SetStateAction, Dispatch} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useString} from '../../utils/useString';
+import {sttModalTitleIntn} from '../../language/default-labels/videoCallScreenLabels';
+import GenericModal from '../common/GenericModal';
+import STTTranscriptTable from './STTTranscriptTable';
+
+interface ViewSTTModalProps {
+  setModalOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export default function ViewSTTTranscriptModal(props: ViewSTTModalProps) {
+  const {setModalOpen} = props;
+
+  const sttModalTitle = useString(sttModalTitleIntn)();
+
+  return (
+    <GenericModal
+      visible={true}
+      onRequestClose={() => setModalOpen(false)}
+      showCloseIcon={true}
+      title={sttModalTitle}
+      cancelable={false}
+      contentContainerStyle={style.contentContainer}>
+      <View style={style.fullBody}>
+        <STTTranscriptTable />
+      </View>
+    </GenericModal>
+  );
+}
+
+const style = StyleSheet.create({
+  contentContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    flexShrink: 0,
+    width: '100%',
+  },
+  fullBody: {
+    width: '100%',
+    flex: 1,
+  },
+});

package/template/src/components/stt-transcript/useFetchSTTTranscript.tsx

@@ -0,0 +1,193 @@
+import {useState, useCallback, useEffect, useContext} from 'react';
+import StorageContext from '../StorageContext';
+import {useRoomInfo} from 'customization-api';
+import getUniqueID from '../../utils/getUniqueID';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+
+export interface FetchSTTTranscriptResponse {
+  pagination: {
+    limit: number;
+    total: number;
+    page: number;
+  };
+  stts: {
+    id: string;
+    download_url: string[];
+    title: string;
+    product_name: string;
+    status: 'COMPLETED' | 'STARTED' | 'INPROGRESS' | 'STOPPING';
+    created_at: string;
+    ended_at: string;
+  }[];
+}
+
+export type APIStatus = 'idle' | 'pending' | 'resolved' | 'rejected';
+
+export function useFetchSTTTranscript(defaultLimit = 10) {
+  const {
+    data: {roomId},
+  } = useRoomInfo();
+  const {store} = useContext(StorageContext);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [state, setState] = useState<{
+    status: APIStatus;
+    data: {
+      stts: FetchSTTTranscriptResponse['stts'];
+      pagination: FetchSTTTranscriptResponse['pagination'];
+    };
+    error: any;
+  }>({
+    status: 'idle',
+    data: {stts: [], pagination: {total: 0, limit: defaultLimit, page: 1}},
+    error: null,
+  });
+
+  const fetchStts = useCallback(
+    async (page: number) => {
+      const requestId = getUniqueID();
+      const start = Date.now();
+
+      try {
+        if (!roomId?.host) {
+          return Promise.reject('room id is empty');
+        }
+        const res = await fetch(
+          `${$config.BACKEND_ENDPOINT}/v1/stt-transcript`,
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              authorization: store.token ? `Bearer ${store.token}` : '',
+              'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
+            },
+            body: JSON.stringify({
+              passphrase: roomId.host,
+              limit: defaultLimit,
+              page,
+            }),
+          },
+        );
+        const json = await res.json();
+        const end = Date.now();
+
+        if (!res.ok) {
+          logger.error(
+            LogSource.NetworkRest,
+            'stt-transcript',
+            'Fetching STT transcripts failed',
+            {
+              json,
+              start,
+              end,
+              latency: end - start,
+              requestId,
+            },
+          );
+          throw new Error(json?.error?.message || 'Unknown fetch error');
+        }
+
+        logger.debug(
+          LogSource.NetworkRest,
+          'stt-transcript',
+          'Fetched STT transcripts',
+          {
+            json,
+            start,
+            end,
+            latency: end - start,
+            requestId,
+          },
+        );
+        return json;
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    },
+    [roomId.host, store.token, defaultLimit],
+  );
+
+  const getSTTs = useCallback(
+    (page: number) => {
+      setState(s => ({...s, status: 'pending'}));
+      fetchStts(page).then(
+        data =>
+          setState({
+            status: 'resolved',
+            data: {
+              stts: data.stts || [],
+              pagination: data.pagination || {
+                total: 0,
+                limit: defaultLimit,
+                page: 1,
+              },
+            },
+            error: null,
+          }),
+        err => setState(s => ({...s, status: 'rejected', error: err})),
+      );
+    },
+    [fetchStts, defaultLimit],
+  );
+
+  const deleteTranscript = useCallback(
+    async (id: string) => {
+      const res = await fetch(
+        `${
+          $config.BACKEND_ENDPOINT
+        }/v1/stt-transcript/${id}?passphrase=${encodeURIComponent(
+          roomId.host,
+        )}`,
+        {
+          method: 'DELETE',
+          headers: {'Content-Type': 'application/json'},
+        },
+      );
+      if (!res.ok) {
+        const body = await res.json();
+        throw new Error(
+          body?.error?.message ?? `Delete failed (${res.status})`,
+        );
+      }
+      // optimistic update local state:
+      setState(prev => {
+        // remove the deleted item
+        const newStts = prev.data.stts.filter(item => item.id !== id);
+        // decrement total count
+        const newTotal = Math.max(prev.data.pagination.total - 1, 0);
+        // if we just removed the *last* item on this page, go back a page
+        let newPage = prev.data.pagination.page;
+        if (prev.data.stts.length === 1 && newPage > 1) {
+          newPage = newPage - 1;
+        }
+        return {
+          ...prev,
+          data: {
+            stts: newStts,
+            pagination: {
+              ...prev.data.pagination,
+              total: newTotal,
+              page: newPage,
+            },
+          },
+        };
+      });
+    },
+    [roomId.host],
+  );
+
+  useEffect(() => {
+    getSTTs(currentPage);
+  }, [currentPage, getSTTs]);
+
+  return {
+    status: state.status as APIStatus,
+    stts: state.data.stts,
+    pagination: state.data.pagination,
+    error: state.error,
+    currentPage,
+    setCurrentPage,
+    deleteTranscript,
+  };
+}

package/template/src/components/useUserPreference.tsx

@@ -24,7 +24,6 @@ import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 import {createHook} from 'customization-implementation';
 import ChatContext from './ChatContext';
 import {filterObject, useContent, useRoomInfo, useRtc} from 'customization-api';
-import {gql, useMutation} from '@apollo/client';
 import {
   PSTNUserLabel,
   videoRoomScreenshareText,
@@ -55,15 +54,6 @@ const UserPreferenceContext =
     uids: {},
   });
 
-const UPDATE_USER_NAME_MUTATION = gql`
-  mutation updateUserName($name: String!) {
-    updateUserName(name: $name) {
-      name
-      email
-    }
-  }
-`;
-
 const UserPreferenceProvider = (props: {
   children: React.ReactNode;
   callActive: boolean;
@@ -81,7 +71,6 @@ const UserPreferenceProvider = (props: {
   const getInitialUsername = () =>
     store?.displayName ? store.displayName : '';
   const [displayName, setDisplayName] = useState(getInitialUsername());
-  const [updateUserName] = useMutation(UPDATE_USER_NAME_MUTATION);
 
   const {languageCode} = useLanguage();
   const {screenShareData} = useScreenContext();

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -109,6 +109,8 @@ export const toolbarItemNoiseCancellationText =
 export const toolbarItemWhiteboardText = 'toolbarItemWhiteboardText';
 export const toolbarItemCaptionText = 'toolbarItemCaptionText';
 export const toolbarItemTranscriptText = 'toolbarItemTranscriptText';
+export const toolbarItemManageTranscriptText =
+  'toolbarItemManageTranscriptText';
 export const toolbarItemVirtualBackgroundText =
   'toolbarItemVirtualBackgroundText';
 export const toolbarItemViewRecordingText = 'toolbarItemViewRecordingText';
@@ -149,6 +151,7 @@ export const nativeStopScreensharePopupPrimaryBtnText =
   'nativeStopScreensharePopupPrimaryBtnText';
 
 export const recordingModalTitleIntn = 'recordingModalTitleIntn';
+export const transcriptModalTitleIntn = 'transcriptModalTitleIntn';
 export const stopRecordingPopupHeading = 'stopRecordingPopupHeading';
 export const stopRecordingPopupSubHeading = 'stopRecordingPopupSubHeading';
 export const stopRecordingPopupPrimaryBtnText =
@@ -570,6 +573,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemWhiteboardText]?: I18nConditionalType;
   [toolbarItemCaptionText]?: I18nConditionalType;
   [toolbarItemTranscriptText]?: I18nConditionalType;
+  [toolbarItemManageTranscriptText]?: I18nConditionalType;
   [toolbarItemVirtualBackgroundText]?: I18nBaseType;
   [toolbarItemViewRecordingText]?: I18nConditionalType;
 
@@ -605,6 +609,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [nativeStopScreensharePopupPrimaryBtnText]?: I18nBaseType;
 
   [recordingModalTitleIntn]?: I18nBaseType;
+  [transcriptModalTitleIntn]?: I18nBaseType;
   [stopRecordingPopupHeading]?: I18nBaseType;
   [stopRecordingPopupSubHeading]?: I18nBaseType;
   [stopRecordingPopupPrimaryBtnText]?: I18nBaseType;
@@ -937,6 +942,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [toolbarItemTranscriptText]: active =>
     active ? 'Hide Transcript' : 'Show Transcript',
   [toolbarItemViewRecordingText]: 'View Recordings',
+  [toolbarItemManageTranscriptText]: 'View Transcripts',
 
   [toolbarItemRaiseHandText]: active => (active ? 'Lower Hand' : 'Raise Hand'),
   [toolbarItemSwitchCameraText]: 'Switch Camera',
@@ -1019,6 +1025,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     `Once removed, ${name} will still be able to screen share later.`,
   [removeScreenshareFromRoomPopupPrimaryBtnText]: 'REMOVE',
 
+  [transcriptModalTitleIntn]: 'View Transcripts',
   [sttChangeLanguagePopupHeading]: isFirstTimeOpened =>
     isFirstTimeOpened ? 'Set Spoken Language' : 'Change Spoken Language',
   [sttChangeLanguagePopupSubHeading]:

package/template/src/logger/AppBuilderLogger.tsx

@@ -95,6 +95,7 @@ type LogType = {
     | 'channel_join_request'
     | 'channel_join_approval'
     | 'stt'
+    | 'stt-transcript'
     | 'whiteboard_get_s3_signed_url'
     | 'whiteboard_get_s3_upload_url'
     | 'whiteboard_s3_upload'

package/template/src/pages/Create.tsx

@@ -237,9 +237,9 @@ const Create = () => {
         });
         showShareScreen();
       } catch (error) {
-        const errorCode = error?.networkError?.result?.error?.code;
+        const errorCode = error?.code;
         if (AuthErrorCodes.indexOf(errorCode) !== -1 && isSDK()) {
-          SDKEvents.emit('unauthorized', error?.networkError?.result?.error);
+          SDKEvents.emit('unauthorized', error);
         }
         setLoading(false);
         logger.error(

package/template/src/pages/VideoCall.tsx

@@ -11,7 +11,6 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import {useApolloClient} from '@apollo/client';
 import {View, StyleSheet, Text} from 'react-native';
 import {
   RtcConfigure,
@@ -133,8 +132,6 @@ const VideoCall: React.FC = () => {
   const joiningLoaderLabel = useString(videoRoomStartingCallText)();
   const bannedUserText = useString(userBannedText)();
 
-  const client = useApolloClient();
-
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const {awake, release} = useWakeLock();
   const {isRecordingBot} = useIsRecordingBot();
@@ -424,8 +421,6 @@ const VideoCall: React.FC = () => {
         } else {
           history.push('/');
         }
-        // client.resetStore();//https://github.com/apollographql/apollo-client/issues/2919#issuecomment-406311579
-        client.cache.reset();
       }, 0);
     },
     UserJoined: (uid: UidType) => {

package/template/src/subComponents/LogoutButton.tsx

@@ -13,14 +13,8 @@ import React, {useContext} from 'react';
 import {TouchableOpacity, Text, StyleSheet} from 'react-native';
 import StorageContext, {initStoreValue} from '../components/StorageContext';
 import {useHistory} from '../components/Router';
-import {gql, useMutation} from '@apollo/client';
 import {useString} from '../utils/useString';
 
-const LOGOUT = gql`
-  mutation logoutSession($token: String!) {
-    logoutSession(token: $token)
-  }
-`;
 /**
  * Sends a logout request to the backend and logs out the user from the frontend.
  */
@@ -28,7 +22,6 @@ const LogoutButton = () => {
   const {store, setStore} = useContext(StorageContext);
   const {token} = store;
   const history = useHistory();
-  const [logoutQuery] = useMutation(LOGOUT);
   //commented for v1 release
   // const oauthLoginLabel = useString('oauthLoginLabel')();
   // const logoutButton = useString('logoutButton')();
@@ -41,16 +34,13 @@ const LogoutButton = () => {
        * User stored some data in localstorage we don't want to remove their on logout.
        * so setting prevstate with store default value
        */
-      setStore((prevState) => {
+      setStore(prevState => {
         return {
           ...prevState,
           ...initStoreValue,
         };
       });
     }
-    logoutQuery({variables: {token}}).catch((e) => {
-      console.log(e);
-    });
   };
 
   const login = () => {