ChatGPT-like input

[dominikpeter]

Question

I am looking for a way to mimic the behaviour of ChatGPT Input - or most other chatbots. This behaves as follows: When typing text and pressing Enter, the "search" is fired. When hitting Shift+Enter or pasting line delimited text, the input automatically becomes multiline.

I can easily enable autogrow with quasar props. However, this now also adds a new line with a normal keypress.enter.

ui.input(placeholder="Search").props(
    """
    rounded 
    autogrow
    autofocus 
    outlined
    v-model="search" 
    type="search" 
    """
 )

I also found this on Stackoverflow but could not get it to work.

Any idea how I can change the props to enable this behaviour?

[python-and-novella]

ui.input(placeholder="Search").props(
    """
    rounded 
    autogrow
    autofocus 
    outlined
    """
 ).on('keypress.enter',lambda e:None if e.args['shiftKey'] else e.sender.set_value('')  ,args=['shiftKey'])

[dominikpeter]

Awesome! Thanks a lot!

[dominikpeter]

The code works. But the input now has these glitches that are annoying. When you press Enter, it wants to jump to the new line, but then makes the call directly. Does anyone know how to avoid this?

[python-and-novella]

Use javascript's event.preventDefault().
But I have no time to show example.

[aersam]

I have time ;)

preventDefault only seems to work with a js_handler, so you need two handlers:

.on("keypress", self._handle_keypress) \
.on("keypress", js_handler="""
    (e) => { 
        if (!e.shiftKey && e.key === "Enter") { 
            e.preventDefault()
        }
    }
""")

[dominikpeter]

This works :-)