-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40 from sendbird/feature/elliot/added-ai-chatbot-…
…widget-sample Added ai chatbot widget sample
- Loading branch information
Showing
6 changed files
with
184 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
131 changes: 131 additions & 0 deletions
131
...rc/main/java/com/sendbird/uikit/samples/customization/aichatbot/WebViewAIChatBotSample.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| package com.sendbird.uikit.samples.customization.aichatbot | ||
|
|
||
| import android.app.Activity | ||
| import android.app.Dialog | ||
| import android.content.Intent | ||
| import android.graphics.Color | ||
| import android.graphics.drawable.ColorDrawable | ||
| import android.os.Bundle | ||
| import android.util.Log | ||
| import android.view.ViewGroup | ||
| import android.webkit.ConsoleMessage | ||
| import android.webkit.WebChromeClient | ||
| import android.widget.Toast | ||
| import androidx.appcompat.app.AppCompatActivity | ||
| import com.sendbird.uikit.samples.common.preferences.PreferenceUtils | ||
| import com.sendbird.uikit.samples.databinding.ActivityWebViewAiChatbotBinding | ||
| import com.sendbird.uikit.samples.databinding.DialogWebViewAiChatbotBinding | ||
|
|
||
| // Set the Bot ID | ||
| private const val BOT_ID = "client_bot" | ||
|
|
||
| fun showWebViewAiChatBotSample(activity: Activity) { | ||
| activity.startActivity(Intent(activity, WebViewAiChatBotActivity::class.java)) | ||
| } | ||
|
|
||
| class WebViewAiChatBotActivity : AppCompatActivity() { | ||
| private val binding: ActivityWebViewAiChatbotBinding by lazy { | ||
| ActivityWebViewAiChatbotBinding.inflate(layoutInflater) | ||
| } | ||
| private val aiChatBotDialogBinding: DialogWebViewAiChatbotBinding by lazy { | ||
| DialogWebViewAiChatbotBinding.inflate(layoutInflater) | ||
| } | ||
|
|
||
| // Create the Dialog to chat with the AI ChatBot | ||
| private val dialog: Dialog by lazy { | ||
| Dialog(this).apply { | ||
| setContentView(aiChatBotDialogBinding.root) | ||
| window?.let { | ||
| it.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT) | ||
| it.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| override fun onCreate(savedInstanceState: Bundle?) { | ||
| super.onCreate(savedInstanceState) | ||
| setContentView(binding.root) | ||
|
|
||
| binding.fbWidget.setOnClickListener { | ||
| // Open the WebView to chat with the AI ChatBot | ||
| showAIChatBotWidget() | ||
| } | ||
| } | ||
|
|
||
| private fun showAIChatBotWidget() { | ||
| // Load the WebView to chat with the AI ChatBot Widget | ||
| with(aiChatBotDialogBinding.wvChatBot) { | ||
| settings.javaScriptEnabled = true | ||
| settings.domStorageEnabled = true | ||
| webChromeClient = object : WebChromeClient() { | ||
| override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean { | ||
| // Handle error | ||
| Log.e("WebViewError", "Error: ${consoleMessage?.message()} at line ${consoleMessage?.lineNumber()} of ${consoleMessage?.sourceId()}") | ||
| if (consoleMessage?.messageLevel() == ConsoleMessage.MessageLevel.ERROR) { | ||
| Toast.makeText(this@WebViewAiChatBotActivity, "An error occurred while loading the ChatBot. Please try again.", Toast.LENGTH_SHORT).show() | ||
| } | ||
| return true | ||
| } | ||
| } | ||
|
|
||
| if (url == null) { | ||
| loadDataWithBaseURL( | ||
| "app://local", // Added baseUrl to preserve chat history when the page reloads, allowing restoration of previous chat sessions | ||
| widgetHtmlString(PreferenceUtils.appId, BOT_ID), | ||
| "text/html", | ||
| "utf-8", | ||
| null | ||
| ) | ||
| } | ||
| } | ||
| dialog.show() | ||
| } | ||
| } | ||
|
|
||
| private fun widgetHtmlString(appId: String, botId: String) = | ||
| """ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Chatbot</title> | ||
| <!-- Load React first and then, ReactDOM. Also, these two libs' version should be same --> | ||
| <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> | ||
| <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> | ||
| <!-- Load chat-ai-widget script and set process.env to prevent it get undefined --> | ||
| <script>process = { env: { NODE_ENV: '' } }</script> | ||
| <script crossorigin src="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/index.umd.js"></script> | ||
| <link href="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/style.css" rel="stylesheet" /> | ||
| <!--Optional; to enable JSX syntax--> | ||
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | ||
| <style> | ||
| html,body { height:100% } | ||
| #aichatbot-widget-close-icon { display: none } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <!-- div element for chat-ai-widget container --> | ||
| <div id="root"></div> | ||
| <!-- Initialize chat-ai-widget and render the widget component --> | ||
| <script type="text/babel"> | ||
| const { ChatWindow } = window.ChatAiWidget | ||
| const App = () => { | ||
| return ( | ||
| <ChatWindow | ||
| applicationId="$appId" | ||
| botId="$botId" | ||
| /> | ||
| ) | ||
| } | ||
| ReactDOM.createRoot(document.querySelector('#root')).render(<App/>); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| """.trimIndent() |
19 changes: 19 additions & 0 deletions
19
uikit-samples/src/main/res/layout/activity_web_view_ai_chatbot.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" | ||
| xmlns:app="http://schemas.android.com/apk/res-auto" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent"> | ||
|
|
||
| <com.google.android.material.floatingactionbutton.FloatingActionButton | ||
| android:id="@+id/fbWidget" | ||
| android:layout_width="wrap_content" | ||
| android:layout_height="wrap_content" | ||
| android:layout_margin="20dp" | ||
| android:backgroundTint="@color/ondark_01" | ||
| android:contentDescription="@null" | ||
| android:src="@drawable/logo_sendbird" | ||
| app:borderWidth="0dp" | ||
| app:layout_constraintBottom_toBottomOf="parent" | ||
| app:layout_constraintEnd_toEndOf="parent" /> | ||
|
|
||
| </androidx.constraintlayout.widget.ConstraintLayout> |
11 changes: 11 additions & 0 deletions
11
uikit-samples/src/main/res/layout/dialog_web_view_ai_chatbot.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent"> | ||
|
|
||
| <WebView | ||
| android:id="@+id/wvChatBot" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent" /> | ||
|
|
||
| </androidx.constraintlayout.widget.ConstraintLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters