Overview

There are a few keyboard shortcuts defined in the app which can get triggered while typing in the AI chat. The most severe instance of this problem is using of the Backspace key, which will delete the currently selected component instance on the content canvas.

Steps to reproduce

Previously recorded video, which might be outdated: VIDEO

Updated steps:

  1. Add a component to your content canvas.
  2. Click on it so it gets selected.
  3. Open the AI chat and hit Backspace.

Proposed resolution

Search for code occurrences of useHotkeys in the codebase to get an overview of what kind of shortcuts are provided, then make sure they get properly deactivated when the AI chat has focus.

User interface changes

n/a

CommentFileSizeAuthor
#2 xb-ai-chatbot-issue.mp4189.18 KBakhil babu

Issue fork experience_builder-3534488

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

akhil babu created an issue. See original summary.

akhil babu’s picture

akhil babu
he/him
commented
StatusFileSize
new xb-ai-chatbot-issue.mp4189.18 KB
akhil babu’s picture

akhil babu
he/him
commented
Issue summary: View changes
akhil babu’s picture

akhil babu
he/him
commented
Issue summary: View changes
akhil babu’s picture

akhil babu
he/him
commented
Parent issue: » #3530701: [META] XB AI Issue List
balintbrews’s picture

balintbrews
he/him/his
Location Netherlands 🇳🇱
commented
Title: AI Chat bot not working once some components are added to the canvas » Keyboard shortcuts, incl. deleting a component instance, get mistakenly activated in AI chat
Priority: Normal » Critical
Issue summary: View changes
heyyo’s picture

heyyo commented

Another one which surprised me, was the paste of text into the chat with CTRL+V. If a component was copied previously, instead of pasting the text, it pastes the component into the viewport.
Workaround, use the paste from contextual menu(right click)

kunal.sachdev made their first commit to this issue’s fork.

kunal.sachdev opened merge request !1290

jessebaker made their first commit to this issue’s fork.

jessebaker opened merge request !1318

jessebaker’s picture

jessebaker commented

I've just created a new MR that I think solves this. I've added e.stopPropagation to the AI wizard container onKeydown.

I think it might be better to put this code somewhere closer to, or on, the actual div that is being used as a text area but I have not delved into the <DeepChat> component further.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Active » Reviewed & tested by the community

MR 1318 looks to address it, and maybe it's OK to stop the propagation at the wrapper. I'm gonna RTBC but it probably can't hurt to have someone with the AI service activated to make sure it didn't disrupt anything ( think if we can confirm that submitting via keyboard is unchanged it's probably fine.

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented

Tested manually and it is working as expected. Created a component and it worked as expected. RTBC +1

tim.plunkett made their first commit to this issue’s fork.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Reviewed & tested by the community » Fixed

Merged !1318, thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

neha_bawankar’s picture

neha_bawankar commented

Scenario

Result

Status

  • Add component to page

  • Open AI panel

  • write prompt – Edit this heading

  • press “backspace“ button to delete each character

All prompt characters deleted

PASS

  • Add component to page

  • Open AI panel

  • write prompt – Edit this heading

  • press “cmd+A“ then press “delete“

All prompt characters deleted

PASS

  • Add component to page

  • Open AI panel

  • write prompt – Edit this heading

  • Double click on word and then press “delete“

Selected word deleted

PASS

  • Add component to page

  • Open AI panel

  • write prompt – Edit this heading

  • Add component to page

  • Open AI panel

  • write prompt – Edit this heading

  • Select all content as prompt and then press “delete“

Selected string deleted

PASS

  • Add component to page

  • Open AI panel

  • Copy string by cmd+c “This is a testing prompt “ then paste it
    in chat

  • Send

Prompt pasted and sent

PASS

  • Add component to page

  • Open AI panel

  • Select text , left click and copy “This is a testing prompt “
    then paste vis mouse in chat

  • Send

Prompt pasted and sent

PASS

  • Open AI Panel

  • Type promt an send - “This is a testing prompt“

  • Copy “cmd+c“ and then “cmd+v“ then send

Prompt pasted and sent

PASS

  • Open AI Panel

  • Type promt an send - “This is a testing prompt“

  • Press “enter“

Chat sent

PASS