Bubbles in Chatbot should not be clickable

[letmaik]

• I have searched to see if a similar issue already exists.

<button> is used for chat bubbles which makes the mouse cursor appear as a pointer. This is quite confusing as users often like to select parts of the response and for that there should be no pointer mouse cursor.

See

gradio/js/chatbot/shared/ChatBot.svelte

Lines 185 to 208 in d9afb0f

	<button
	data-testid={j == 0 ? "user" : "bot"}
	class:latest={i === value.length - 1}
	class:message-markdown-disabled={!render_markdown}
	style:user-select="text"
	class:selectable
	style:text-align={rtl ? "right" : "left"}
	on:click={() => handle_select(i, j, message)}
	on:keydown={(e) => {
	if (e.key === "Enter") {
	handle_select(i, j, message);
	}
	}}
	dir={rtl ? "rtl" : "ltr"}
	aria-label={(j == 0 ? "user" : "bot") +
	"'s message: " +
	(typeof message === "string"
	? message
	: `a file of type ${message.file?.mime_type}, ${
	message.file?.alt_text ??
	message.file?.orig_name ??
	""
	}`)}
	>

[abidlabs]

cc @dawoodkhan82 @hannahblair

[hannahblair]

Hmm, this was intentional as an accessibility improvement due to the interactive nature of the chat bubbles when click events are enabled. That said, it's understandable that the cursor can cause confusion. To fix this we can explicitly set the cursor to text, and ensure the aria labelling is clear. Should be a quick fix!