Skip to content

feat: add autoSendInitialMessage config option for pre-populating chat#373

Open
SyncWithRaj wants to merge 5 commits intoFlowiseAI:mainfrom
SyncWithRaj:feature/auto-send-message
Open

feat: add autoSendInitialMessage config option for pre-populating chat#373
SyncWithRaj wants to merge 5 commits intoFlowiseAI:mainfrom
SyncWithRaj:feature/auto-send-message

Conversation

@SyncWithRaj
Copy link
Copy Markdown
Contributor

What was the problem?

Previously, if a developer wanted to pre-populate and send an initial message when the chat widget loads, they had to mutate the DOM directly via JavaScript (e.g., setting the input field's value and clicking the send button programmatically). This doesn't work well with Solid.js because the internal reactive state stays empty, leaving the Send button disabled.

Closes #343

What was built?

A new config option called autoSendInitialMessage. This allows developers to pass any custom message string via the embed config. The widget will automatically type it into the input field and submit it as soon as the chat loads using Solid.js's reactive state system.

It uses a hasAutoSentInitialMessage flag to ensure the automatic message only fires exactly once upon initialization.

How end-users use it:

Chatbot.init({
    chatflowid: 'your-chatflow-id',
    apiHost: '[https://your-api-host.com](https://your-api-host.com)',
    theme: {
        chatWindow: {
            autoSendInitialMessage: 'Hello, I need help with my order!',
        },
    },
})

Technical Changes:

  • src/features/bubble/types.ts: Added autoSendInitialMessage?: string to ChatWindowTheme interface.

  • src/components/Bot.tsx: Added the prop to BotProps. Added logic inside the config-loading createEffect to set the reactive input value and trigger handleSubmit() once the config is fully fetched.

  • src/features/bubble/components/Bubble.tsx & src/features/full/components/Full.tsx: Passed the new config property down to the Bot component.

  • src/window.ts & src/constants.ts: Cleaned up the prop flow so it routes cleanly through the theme object.

Testing:

  • Tested in popup bubble mode.
  • Tested in full-page embed mode.
  • Verified that if the property is omitted or empty, the chat behaves normally.
  • Confirmed the build (yarn build) compiles successfully without TS errors.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces the autoSendInitialMessage feature, enabling the chatbot to automatically send a message upon initialization. The implementation includes updates to the Bot component, theme types, and the bubble/full-page features. Review feedback points out that the auto-send logic incorrectly triggers on page refreshes even with existing history and should be moved inside the configuration loading block to prevent race conditions. Additionally, the state flag tracking the auto-send status should be reset when the chatflowid changes to support component reuse in single-page applications.

Comment thread src/components/Bot.tsx Outdated
Comment thread src/components/Bot.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Start the chat session with a default user message

1 participant