fix: Articles are loading in external browser

Author: muhsin-k

examples/App.tsx

@@ -24,8 +24,8 @@ const App = () => {
     pricingPlan: 'paid',
     status: 'active',
   };
-  const websiteToken = 'uDDidz9scvbDBcxjCfwdWJRZ';
-  const baseUrl = 'https://mobile.chatwoot.app';
+  const websiteToken = 'RY3LaFtwmkPhDdZVmRd4ektW';
+  const baseUrl = 'https://staging.chatwoot.com';
   const [locale, setLocale] = useState('en');
 
   return (
@@ -81,7 +81,7 @@ const App = () => {
         websiteToken={websiteToken}
         locale={locale}
         baseUrl={baseUrl}
-        colorScheme="dark"
+        colorScheme="light"
         closeModal={() => toggleWidget(false)}
         isModalVisible={showWidget}
         user={user}

examples/package.json

@@ -11,7 +11,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chatwoot/react-native-widget": "../chatwoot-react-native-widget-0.0.14.tgz",
+    "@chatwoot/react-native-widget": "../chatwoot-react-native-widget-0.0.16.tgz",
     "@react-native-async-storage/async-storage": "^1.18.1",
     "react": "18.2.0",
     "react-native": "0.71.8",

examples/yarn.lock

@@ -1062,9 +1062,9 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@chatwoot/react-native-widget@../chatwoot-react-native-widget-0.0.14.tgz":
-  version "0.0.14"
-  resolved "../chatwoot-react-native-widget-0.0.14.tgz#66fa6465ca0c9027023c7ca9562ab27ad1835cb6"
+"@chatwoot/react-native-widget@../chatwoot-react-native-widget-0.0.16.tgz":
+  version "0.0.16"
+  resolved "../chatwoot-react-native-widget-0.0.16.tgz#92fc5b787751147d4ee761f976c8f0e56e73cc85"
   dependencies:
     react-native-modal "^13.0.1"
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/react-native-widget",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "React Native widget for Chatwoot",
   "main": "index.js",
    "scripts": {

src/WebView.js

@@ -37,6 +37,7 @@ const WebViewComponent = ({
   customAttributes,
   closeModal,
 }) => {
+  const [currentUrl, setCurrentUrl] = React.useState(null);
   let widgetUrl = `${baseUrl}/widget?website_token=${websiteToken}&locale=${locale}`;
 
   if (cwCookie) {
@@ -50,7 +51,10 @@ const WebViewComponent = ({
   });
 
   const onShouldStartLoadWithRequest = (request) => {
-    const shouldRedirectToBrowser = !widgetUrl.includes(request.url);
+    const isMessageView = currentUrl && currentUrl.includes('#/messages');
+    const isAttachmentUrl = !widgetUrl.includes(request.url);
+    // Open the attachments only in the external browser
+    const shouldRedirectToBrowser = isMessageView && isAttachmentUrl;
     if (shouldRedirectToBrowser) {
       Linking.openURL(request.url);
       return false;
@@ -59,6 +63,10 @@ const WebViewComponent = ({
     return true;
   };
 
+  const handleWebViewNavigationStateChange = (newNavState) => {
+    setCurrentUrl(newNavState.url);
+  };
+
   return (
     <WebView
       source={{
@@ -89,6 +97,7 @@ const WebViewComponent = ({
       style={styles.WebViewStyle}
       injectedJavaScript={injectedJavaScript}
       onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+      onNavigationStateChange={handleWebViewNavigationStateChange}
       scrollEnabled
     />
   );