@tellescope/chat 1.4.26 → 1.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "1.4.26",
+  "version": "1.4.27",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -34,13 +34,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^1.4.26",
-    "@tellescope/react-components": "^1.4.26",
-    "@tellescope/sdk": "^1.4.26",
-    "@tellescope/types-client": "^1.4.26",
-    "@tellescope/types-models": "^1.4.26",
-    "@tellescope/types-utilities": "^1.3.20",
-    "@tellescope/utilities": "^1.4.26",
+    "@tellescope/constants": "^1.4.27",
+    "@tellescope/react-components": "^1.4.27",
+    "@tellescope/sdk": "^1.4.27",
+    "@tellescope/types-client": "^1.4.27",
+    "@tellescope/types-models": "^1.4.27",
+    "@tellescope/types-utilities": "^1.4.27",
+    "@tellescope/utilities": "^1.4.27",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -51,7 +51,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "79ff60f52dfe1f21c9918ff097d978c523d4390b",
+  "gitHead": "d7860894a5b584eca1e5e571e7181710d295835c",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -59,7 +59,7 @@ import {
   Session,
   EnduserSession,
 } from "@tellescope/sdk"
-import { SendMessage } from "./components"
+import { HTMLMessage, SendMessage } from "./components"
 
 export {
   user_display_name, // for convenience
@@ -184,13 +184,19 @@ export const Message = ({
 
   const messageComponent = IN_REACT_WEB ? (
     <Typography component="div" style={{ ...textStyle, ...textBGStyle }}>
-      {message.message}
+      {message.html
+        ? <HTMLMessage html={message.html} />
+        : message.message
+      }
       {attachments}
     </Typography>
   ) : (
     <Flex style={{ ...textBGStyle }}>
       <Typography component="div" style={{ ...textStyle }}>
-        {message.message}
+        {message.html
+          ? <HTMLMessage html={message.html} />
+          : message.message
+        }
         {attachments}
       </Typography>   
     </Flex>
@@ -393,7 +399,6 @@ const ConversationPreview = ({ onClick, selected, room, style, displayInfo, sele
 }
 
 const PreviewWithData = ({ PreviewComponent=ConversationPreview, ...props }: Omit<ConversationPreviewProps, 'displayInfo'> & Pick<SidebarInfo, 'PreviewComponent'>) => {
-  const session = useResolvedSession()
   const [displayInfo] = useChatRoomDisplayInfo(props.room.id)
 
   return (

package/src/components.native.tsx

@@ -1,5 +1,5 @@
 import { launchImageLibrary, launchCamera } from 'react-native-image-picker';
-import { Modal, TextInput } from "react-native"
+import { Modal, TextInput, useWindowDimensions } from "react-native"
 import { Avatar } from 'react-native-paper'
 import {
   useFileUpload,
@@ -14,6 +14,32 @@ import {
   useResolvedSession, 
 } from "@tellescope/react-components"
 import { useState } from 'react';
+import { HTMLMessageProps } from './components';
+import { remove_script_tags } from '@tellescope/utilities';
+import RenderHtml from 'react-native-render-html';
+
+export const HTMLMessage = ({ html } : HTMLMessageProps) => {
+  const { width } = useWindowDimensions();
+  return (
+    <RenderHtml
+      contentWidth={width}
+      source={{ 
+        html: (
+          remove_script_tags(html) 
+        )
+      }}
+      tagsStyles={{
+        'body': {
+          color: 'white',
+        },
+        'a': {
+          color: 'white',
+          textDecorationColor: 'white', // underline color in the link
+        }
+      }}
+    />
+  );
+}
 
 const CHAT_ICON_SIZE = 35
 const SendImageOrVideo = ({ 

package/src/components.tsx

@@ -7,9 +7,25 @@ import {
   SendIcon,
   useChats,
 } from "@tellescope/react-components"
-import { user_display_name } from "@tellescope/utilities";
+import { remove_script_tags, user_display_name } from "@tellescope/utilities";
 import { Checkbox, TextField, FormControlLabel, Grid } from "@mui/material";
 
+export interface HTMLMessageProps {
+  html: string,
+}
+export const HTMLMessage = ({ html } : HTMLMessageProps) => {
+  return (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: remove_script_tags(
+          html.replaceAll('<a', '<a style="color: white;"')
+        ),
+      }} 
+    />
+
+  )
+}
+
 interface SendMessage_T {
   roomId: string,
   onNewMessage?: (m: ChatMessage) => void;