fix: better chatbot input & bubble

[Light2Dark]

📝 Summary

Fixes #3401 . Use codemirror as chatbot input, / triggers autocomplete.

🔍 Description of Changes

• multiline input
• multiline chat bubble
• removed an unnecessary extension (codemirror-mentions) and implemented custom one
  note: dataset atom is not finding any tables, hence @ is not working.

📋 Checklist

• I have read the contributor guidelines.
• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• I have added tests for the changes made.
• I have run the code and verified that it works as expected.

📜 Reviewers

@akshayka OR @mscolnick

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
marimo-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 13, 2025 3:03pm

[vercel]

@Light2Dark is attempting to deploy a commit to the marimo Team on Vercel.

A member of the Team first needs to authorize it.

[mscolnick]

Can we do 2 separate mentions plugins? One for "@" data and one for "/" prompts; instead of appending the trigger, replace it.

[Light2Dark]

do you mean if there are additionalCompletions, we only use the "/" regex?

it's also possible to accept multiple regexes, if we want to make it extensible

export function mentions(
  matchBeforeRegexes: RegExp[],
  data: Completion[] = [],
): Extension {
  return autocompletion({
    override: [
      (context: CompletionContext) => {
        const word = matchBeforeRegexes
          .map((regex) => context.matchBefore(regex))
          .find(Boolean);

[mscolnick]

from the code, it looks like @ would trigger autocomplete for prompts, and I was thinking that @ only trigger autocomplete for datasets, while / triggers for prompts. you could maybe do this in a single mentions plugin, but doing two (one for datasets and one for prompts) might be easier

[Light2Dark]

hmm, you can't do 2 autocompletion extensions, since they will overwrite and cause a conflict from codemirror. Seems a solution will be tricky if we want to have 2 mentions plugin.

return [
      mentions(/@(\w+)?/, completions),
      mentions(/\/(\w+)?/, additionalCompletions?.completions),
      ...
]

error: Config merge conflict for field override

but anyways, @ will indeed trigger autocomplete, but there are no matching prompts beginning with @, so nothing is found.

[mscolnick]

gotcha. i see, that makes sense.

then what you have is good to me.

[mscolnick]

I think the mention changes are good / worth keeping. I plan to add support for MCPs so we could eventually replace this with https://github.com/marimo-team/codemirror-mcp

[mscolnick]

awesome stuff!

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.10.13-dev4