Comments (9)
@dpinol I can confirm that we've also just encountered this same bug (tested on node v12 and v14, and on Windows 10 and MacOS). We end up with just the main.js
file in the dist
directory. I'll begin investigating now, would really appreciate any guidance.
from botonic.
update
Progress so far: I've now fixed the webpack config so that the correct file is output. I updated webpack.config.js like so (note quite a few differences from the docs):
...
function botonicSelfHostedConfig(mode) {
return {
optimization: optimizationConfig,
mode: mode,
devtool: sourceMap(mode),
target: 'web',
entry: path.resolve('webpack-entries', 'self-hosted-entry.js'),
module: {
rules: [babelLoaderConfig, fileLoaderConfig(path.join('..', ASSETS_DIRNAME)), stylesLoaderConfig],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'webchat.botonic.js',
library: 'Botonic',
libraryTarget: 'umd',
libraryExport: 'app',
publicPath: './',
},
resolve: resolveConfig,
plugins: [
imageminPlugin,
new webpack.DefinePlugin({
IS_BROWSER: false,
IS_NODE: true,
HUBTYPE_API_URL: null,
BOTONIC_TARGET: BOTONIC_TARGETS.DEV,
}),
],
}
}
module.exports = (env, argv) => {
if (env.target === BOTONIC_TARGETS.ALL) {
return [
botonicNodeConfig(argv.mode),
botonicWebviewsConfig(argv.mode),
botonicWebchatConfig(argv.mode),
]
} else if (env.target === BOTONIC_TARGETS.DEV) {
return [botonicDevConfig(argv.mode)]
} else if (env.target === BOTONIC_TARGETS.NODE) {
return [botonicNodeConfig(argv.mode)]
} else if (env.target === BOTONIC_TARGETS.WEBVIEWS) {
return [botonicWebviewsConfig(argv.mode)]
} else if (env.target === BOTONIC_TARGETS.WEBCHAT) {
return [botonicWebchatConfig(argv.mode)]
} else if (env.target === 'self-hosted') {
return [botonicSelfHostedConfig(argv.mode)]
} else {
return null
}
}
I then realized that in any given HTML you need to invoke the chatbot like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="webchat.botonic.js"></script>
</head>
<body>
<h1>test</h1>
<div id="root"></div>
<script> type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
Botonic.render(document.getElementById('root'), )
})
</script>
<!-- page content -->
</body>
</html>
This gets me a chatbot widget that can expand, and loads my custom cover. However, the text and buttons are not showing correctly. Here's the change I made to get it this far:
...
// my attempt
import {webchat} from "../webchat";
export class SelfHostedApp extends WebchatApp {
constructor({
theme = {},
persistentMenu,
blockInputs,
emojiPicker,
enableAttachments,
onInit,
onOpen,
onClose,
onMessage,
...botOptions
}) {
super({
theme,
persistentMenu,
blockInputs,
emojiPicker,
enableAttachments,
onInit,
onOpen,
onClose,
onMessage,
})
this.bot = new ReactBot({
...botOptions,
})
}
// Passing in webchat
render(dest, optionsAtRuntime = webchat) {
let {
theme = {},
persistentMenu,
blockInputs,
emojiPicker,
enableAttachments,
onInit,
onOpen,
onClose,
onMessage,
...webchatOptions
} = optionsAtRuntime
theme = { ...this.theme, ...theme }
persistentMenu = persistentMenu || this.persistentMenu
blockInputs = blockInputs || this.blockInputs
emojiPicker = emojiPicker || this.emojiPicker
enableAttachments = enableAttachments || this.enableAttachments
this.onInit = onInit || this.onInit
this.onOpen = onOpen || this.onOpen
this.onClose = onClose || this.onClose
this.onMessage = onMessage || this.onMessage
render(
<Webchat
ref={this.webchatRef}
{...webchatOptions}
theme={theme}
persistentMenu={persistentMenu}
blockInputs={blockInputs}
emojiPicker={emojiPicker}
enableAttachments={enableAttachments}
getString={(stringId, session) => this.bot.getString(stringId, session)}
setLocale={(locale, session) => this.bot.setLocale(locale, session)}
onInit={(...args) => this.onInitWebchat(...args)}
onOpen={(...args) => this.onOpenWebchat(...args)}
onClose={(...args) => this.onCloseWebchat(...args)}
onUserInput={(...args) => this.onUserInput(...args)}
/>,
dest
)
}
async onUserInput({ input, session, lastRoutePath }) {
this.onMessage && this.onMessage(this, { from: 'user', message: input })
let resp = await this.bot.input({ input, session, lastRoutePath })
this.onMessage &&
resp.response.map(r => this.onMessage(this, { from: 'bot', message: r }))
this.webchatRef.current.addBotResponse(resp)
}
}
My guess is that there are some other configs that need to be passed in. Continuing my investigation now, but any help would be greatly appreciated @marcrabat
from botonic.
Display currently when deployed:
How it looks when running locally:
from botonic.
Can confirm that this behavior is not limited to my app. Just ran the self-hosted deploy with the botonic telco example and got similar results (all on botonic version 0.17.0)
from botonic.
Hi @ChristopherGS , by seeing the screenshots I think that this can be related on how the rendering logic is resolved. If you want to investigate further, I think it would be interesting to see these pieces of code in @botonic/core
:
IS_NODE and IS_BROWSER are env variables resolved by webpack at build time. It seems that it is not resolving the environment as expected.
export const isNode = () => {
return typeof IS_NODE !== 'undefined'
? // eslint-disable-next-line no-undef
IS_NODE
: typeof process !== 'undefined' &&
process.versions !== null &&
process.versions.node !== null
}
export const isBrowser = () => {
return typeof IS_BROWSER !== 'undefined'
? // eslint-disable-next-line no-undef
IS_BROWSER
: typeof window !== 'undefined' &&
typeof window.document !== 'undefined' &&
!window.process
}
from botonic.
Hi @ChristopherGS , by seeing the screenshots I think that this can be related on how the rendering logic is resolved. If you want to investigate further, I think it would be interesting to see these pieces of code in
@botonic/core
:
IS_NODE and IS_BROWSER are env variables resolved by webpack at build time. It seems that it is not resolving the environment as expected.export const isNode = () => { return typeof IS_NODE !== 'undefined' ? // eslint-disable-next-line no-undef IS_NODE : typeof process !== 'undefined' && process.versions !== null && process.versions.node !== null } export const isBrowser = () => { return typeof IS_BROWSER !== 'undefined' ? // eslint-disable-next-line no-undef IS_BROWSER : typeof window !== 'undefined' && typeof window.document !== 'undefined' && !window.process }
Thanks @vanbasten17 that was it!
In webpack.config.js
, in the botonicSelfHostedConfig
plugins array, setting:
IS_BROWSER: true
Fixed the issue. In hindsight obvious, but really appreciate the push. I'll be happy to do a PR updating the docs for the next person.
from botonic.
Cool!! Good effort @ChristopherGS ! Please, go ahead with the PR, you're welcome 😊
from botonic.
I think it's only necessary to update this part of the docs :)
from botonic.
Here the file that needs to be updated: https://github.com/hubtype/botonic/blob/master/docs/docs/deployment/standalone-js-bundle.md
from botonic.
Related Issues (20)
- ERROR in ./node_modules/@botonic/react/src/components/index-types.ts HOT 7
- Botonic Train Error HOT 1
- How do I import as a standalone project using the following structure? HOT 1
- Is this the latest version?
- Botonic Train issues
- Improve overall security of the project
- botonic new - not working on Apple M1 Max HOT 7
- botonic serve on working on my machine HOT 1
- Script error displayed when I type in the input area
- Question
- Stand-alone JS bundle not working HOT 1
- chat bubble not showing HOT 1
- how to jump from one action to another? HOT 2
- There is a vulnerability in @botonic/core
- input.data have a limit of 1000 characters?
- Please provide option to upload files of pdf or image
- Cannot install dependencies even after considering the solutions mentioned HOT 1
- Unable to create a new Botonic project based on the "blank" template
- Cannot download NLP databases glove-50d-en.db
- Quick Start - not working HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from botonic.