feat: Webview Chatwoot Widget (#42)

* feat: add webview chatwoot widget

* chore: upgrade gradle

* chore: untrack generated files

* chore: add path provider mock for tests

* chore: update json identifier hash key

* chore: deprecated chatwoot dialog widget

* chore: updated sdk exports

* fix: add close event trigger

* feat: add widget callbacks

* chore: update webview widget docs

* chore: correct typos in dart docs variable description

* docs: update README.md

* docs: update README.md

* Update example/lib/main.dart

---------

Co-authored-by: Sivin Varghese <[email protected]>

Author: EphraimNetWorks

.gitignore

@@ -8,6 +8,10 @@
 .buildlog/
 .history
 .svn/
+*.g.dart
+*.mocks.dart
+applicationDocumentsPath
+hive_testing_path
 
 # IntelliJ related
 *.iml

README.md

@@ -26,17 +26,17 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 30
+    compileSdkVersion 33
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
     }
 
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
-        applicationId "com.example.example"
-        minSdkVersion 16
-        targetSdkVersion 30
+        applicationId "com.chatwoot.example"
+        minSdkVersion 19
+        targetSdkVersion 33
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }

example/android/app/build.gradle

@@ -9,6 +9,7 @@
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
+            android:exported="true"
             android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user

example/android/app/src/main/AndroidManifest.xml

@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.7.20'
     repositories {
         google()
         jcenter()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.0'
+        classpath 'com.android.tools.build:gradle:7.4.1'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

example/android/build.gradle

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.6-all.zip

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,11 @@
+import 'dart:io';
+
 import 'package:chatwoot_sdk/chatwoot_sdk.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:image/image.dart' as image;
+import 'package:image_picker/image_picker.dart' as image_picker;
+import 'package:path_provider/path_provider.dart';
 
 void main() {
   runApp(MyApp());
@@ -31,75 +37,66 @@ class MyHomePage extends StatefulWidget {
 class _MyHomePageState extends State<MyHomePage> {
   @override
   void initState() {
-    // TODO: implement initState
     super.initState();
   }
 
-  _showChatwootDialog() {
-    ChatwootChatDialog.show(
-      context,
-      baseUrl: "https://app.chatwoot.com",
-      inboxIdentifier: "xxxxxxxxxxxxxxxxxxx",
-      title: "Chatwoot Support",
-      user: ChatwootUser(
-        identifier: "[email protected]",
-        name: "Tester test",
-        email: "[email protected]",
-      ),
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ChatwootChat(
-      baseUrl: "https://app.chatwoot.com",
-      inboxIdentifier: "xxxxxxxxxxxxxxxxxxx",
-      user: ChatwootUser(
-        identifier: "[email protected]",
-        name: "Tester test1",
-        email: "[email protected]",
-      ),
+    return Scaffold(
       appBar: AppBar(
-        title: Text(
-          "Chatwoot",
-          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
-        ),
-        leading: InkWell(
-          onTap: () => _showChatwootDialog(),
-          child: Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: Image.asset("assets/chatwoot_logo.png"),
-          ),
+        title: Text("Chatwoot Example"),
+      ),
+      body: ChatwootWidget(
+        websiteToken: "websiteToken",
+        baseUrl: "https://app.chatwoot.com",
+        user: ChatwootUser(
+          identifier: "[email protected]",
+          name: "Tester test",
+          email: "[email protected]",
         ),
-        backgroundColor: Colors.white,
+        locale: "en",
+        closeWidget: () {
+          if (Platform.isAndroid) {
+            SystemNavigator.pop();
+          } else if (Platform.isIOS) {
+            exit(0);
+          }
+        },
+        //attachment only works on android for now
+        onAttachFile: _androidFilePicker,
+        onLoadStarted: () {
+          print("loading widget");
+        },
+        onLoadProgress: (int progress) {
+          print("loading... ${progress}");
+        },
+        onLoadCompleted: () {
+          print("widget loaded");
+        },
       ),
-      onWelcome: () {
-        print("Welcome event received");
-      },
-      onPing: () {
-        print("Ping event received");
-      },
-      onConfirmedSubscription: () {
-        print("Confirmation event received");
-      },
-      onMessageDelivered: (_) {
-        print("Message delivered event received");
-      },
-      onMessageSent: (_) {
-        print("Message sent event received");
-      },
-      onConversationIsOffline: () {
-        print("Conversation is offline event received");
-      },
-      onConversationIsOnline: () {
-        print("Conversation is online event received");
-      },
-      onConversationStoppedTyping: () {
-        print("Conversation stopped typing event received");
-      },
-      onConversationStartedTyping: () {
-        print("Conversation started typing event received");
-      },
     );
   }
+
+  Future<List<String>> _androidFilePicker() async {
+    final picker = image_picker.ImagePicker();
+    final photo =
+        await picker.pickImage(source: image_picker.ImageSource.gallery);
+
+    if (photo == null) {
+      return [];
+    }
+
+    final imageData = await photo.readAsBytes();
+    final decodedImage = image.decodeImage(imageData);
+    final scaledImage = image.copyResize(decodedImage, width: 500);
+    final jpg = image.encodeJpg(scaledImage, quality: 90);
+
+    final filePath = (await getTemporaryDirectory()).uri.resolve(
+          './image_${DateTime.now().microsecondsSinceEpoch}.jpg',
+        );
+    final file = await File.fromUri(filePath).create(recursive: true);
+    await file.writeAsBytes(jpg, flush: true);
+
+    return [file.uri.toString()];
+  }
 }