Giter Site home page Giter Site logo

Comments (9)

ChristopherGS avatar ChristopherGS commented on August 12, 2024

@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.

ChristopherGS avatar ChristopherGS commented on August 12, 2024

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.

ChristopherGS avatar ChristopherGS commented on August 12, 2024

Display currently when deployed:
image

How it looks when running locally:
image

from botonic.

ChristopherGS avatar ChristopherGS commented on August 12, 2024

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)

image

from botonic.

vanbasten17 avatar vanbasten17 commented on August 12, 2024

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.

ChristopherGS avatar ChristopherGS commented on August 12, 2024

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.

vanbasten17 avatar vanbasten17 commented on August 12, 2024

Cool!! Good effort @ChristopherGS ! Please, go ahead with the PR, you're welcome 😊

from botonic.

vanbasten17 avatar vanbasten17 commented on August 12, 2024

I think it's only necessary to update this part of the docs :)

from botonic.

vanbasten17 avatar vanbasten17 commented on August 12, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.