Add Full screen and Expand options to Deepchat chatbot

Hi @bbruno - you don't need permission: feel free to create a fork through this ticket and add your suggested changes. If you need help with the process you can use https://www.drupal.org/community/contributor-guide

We are doing some issue management housekeeping and adding/removing components.

We are removing the "Other Submodules" component and want people to categorize issues with the best module/submodule component.

Moving this issue to "AI Chatbot".

See #3533272: Update AI module project components for more details.

Hi @bbruno, your work looks interesting. Please add your changes here.

Maybe I am not testing it right but when I tried to configure the block to be placed in the Toolbar I seem to be missing that option. It's probably removed. Anyway, placed bottom right, the block does not seem to display any visuals for toggling to full screen. Testing with the Gin admin theme.

Thank you!

I've tested this as per instructions, and everything seems to work as described.

I've added some comments & suggestions to the MR, mostly minor, but please have a look if it makes sense to add.

Thank you @bbruno, the approach of offering configurable expansion methods (none/expand/fullscreen) as a block setting is clean and flexible.

Testing Environment

• Drupal 11.3, AI module 1.3.x-dev
• Gin admin theme, toolbar placement
• Tested all three expansion_method options: none, expand, fullscreen

What Works Well

• Overall functionality: The expand and fullscreen features work as expected, providing a flexible and user-friendly experience.
• Conditional library loading: toolbar-fullscreen.css is only attached when expansion_method == 'fullscreen' — verified via non-aggregated CSS output. Clean separation of concerns.
• Block form UX: The #states visibility condition correctly hides the "Expansion method" field for non-toolbar placements.
• Fullscreen exit animation: The animationend + double requestAnimationFrame approach for clean exit transitions is solid.
• Accessibility: aria-expanded toggling and Escape key handler for fullscreen are good.
• Schema: expansion_method is properly added to the block settings schema.
• CSS architecture: Using a CSS custom property (--toolbar-chatbot-expand-amount) to drive width calculations is elegant — it allows the expand amount to propagate through all dependent calculations without duplication.
• Mode: "none": When set to none, the expand button is completely omitted from the DOM (not just hidden), which is the right approach.

Issues Found

1. toggleChatbot(false) — parameter is ignored (minor)

Lines 99 and 102 of toolbar-chatbot.js call toggleChatbot(false), but toggleChatbot is defined as const toggleChatbot = () => { ... } — it takes no parameters. The false argument is silently ignored. The function always toggles the state, which happens to work correctly here (since close is only clickable when open), but the intent to explicitly "close" is lost. Consider either:

• Accepting an optional parameter: const toggleChatbot = (forceClose = null) => { ... }
• Or simply calling toggleChatbot() without the misleading argument

2. Expand state not cleaned up on close

In expand mode: When the user expands the chatbot (adds ai-chatbot-expanded to body) and then clicks the close button (lines 97-104), the ai-chatbot-expanded class and the expand button's active class are not removed. So reopening the chatbot shows it already expanded. This is the opposite behavior from fullscreen mode, where exitFullscreen() properly cleans everything up before closing.
This may be intentional (persist expanded state across open/close), but if so, it's asymmetric with fullscreen behavior and the aria-expanded attribute will be stale (still "true" on a closed chatbot). Consider either:

• Resetting expand state on close (consistent with fullscreen)
• Or documenting this as intentional and persisting via localStorage (consistent with the chatbotOpened state)

3. Trailing whitespace (nitpick)

toolbar-chatbot.js line 112 has trailing whitespace. Also, the twig template line 27 (class="sidebar-header--icon toolbar-button expand" ) has a trailing space before the closing quote — not harmful but worth a quick cleanup.

Observations (non-blocking)

• collapse.svg uses stroke="#414247" (hardcoded color) while other SVGs use currentColor. Since these are all used as mask-image (where only the alpha channel matters), it's functionally equivalent, but inconsistent. Non-blocking.

Setting to Needs work. Nice work overall — the architecture is solid and the feature is well thought out.

Re-reviewed after the latest updates.
Thank you @bbruno for the quick turnaround on the review feedback — the code is looking solid.

Review:
- Issue summary: Complete
- Scope: Changes are focused on the stated feature — no unrelated modifications.
- Manual testing:
- Tested with Gin theme, toolbar placement.
- Expand mode: Sidebar widens correctly, page content shifts right. Caret icon rotates to indicate expanded state.
- Fullscreen mode: Modal opens with fade animation, backdrop overlay works. Escape key exits fullscreen correctly.
- None mode: Expand button is correctly omitted from the DOM.
- Close behavior: Expand and fullscreen states are properly reset on close now
- toggleChatbot() no longer called with unused false argument
- Coding standards: No issues spotted.
- Accessibility: aria-expanded and aria-label attributes present and update correctly. Escape key handler works for fullscreen.

I would agree about discussing persistance ofthe expand mode in localStorage at a separate issue.

Setting to RTBC.

@bbruno, is there some reason this can not be backported to 1.3.x?

Merged

Tested for 1.3.x as well and being backported.