Waiting for a command to complete in the Terminal Component

UI Components for Vue
Post Reply
MarkEdmunds
Posts: 6
Joined: 04 Nov 2021, 12:20

30 Mar 2023, 13:47

Hi,

Does anyone know if it is possible to wait for a process (axios call) to return a response before showing the prompt?

I'm trying to use the Terminal Component like a normal terminal where commands can be issued which might take a while to complete. And the problem I am facing is that the prompt returns instantly even though no response has been returned yet. As you might expect, this is confusing our users...

Here is a stripped out version of my code (which has the problem)

Code: Select all

<template>
   ...
        <Terminal welcomeMessage="Welcome" prompt="$ " />
   ....
</template>

<script>

import Terminal                         from 'primevue/terminal';
import TerminalService             from 'primevue/terminalservice'

...

setup(props) {
        onMounted(() => {
            TerminalService.on('command', commandHandler);
        })

        onBeforeUnmount(() => {
            TerminalService.off('command', commandHandler);
        })

        const commandHandler = (text) => {
              ...
             switch (command) {
                case "fast command":
                    TerminalService.emit('response', "Instantly respond with result");
                    break;

               case "slow command":
                   // call an axios function which could take a while to respond
                   callAsyncFunc(text);
                   break;
             ....
        }

        const callAsyncFunc = async (message) => {
            await axios.put(route("async.submit"), {
                message: message,
            }).then((response) => {
                try {
                    response.data.choices.forEach(choice => {
                        TerminalService.emit('response', choice.message.content);
                    })
                } catch (err) {
                    TerminalService.emit('response', "Failed to connect");
                    console.error(err);
                }
            }).catch(err => {
                TerminalService.emit('response', "Failed to connect");
                console.error(err.response);
            });
        }
    },

As you can see, the fast command instantly emits content back to the terminal using the terminal service and works as desired.

But the second command instantly returns a promise and therefore allows the terminal to show the command prompt again.

Is it possible to 'delay' Terminal until I get a response from the axios call?

I've searched all over the place for an answer and can't find one anywhere (maybe I'm missing the obvious) so if anyone has any ideas, I'd appreciate any pointers.

Thank you!

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests