Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: chatty ui #86

Merged
merged 26 commits into from
Jun 18, 2024
Merged

feat: chatty ui #86

merged 26 commits into from
Jun 18, 2024

Conversation

kyteinsky
Copy link
Contributor

No description provided.

@kyteinsky kyteinsky force-pushed the feat/chatty-ui branch 2 times, most recently from 1d5237c to aaf8af6 Compare May 9, 2024 09:31
Copy link
Member

@julien-nc julien-nc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incredibly nice!
It looks awesome and works super good. Congrats! 💪
I had forgotten you were using the textProcessingManager->runTask so it was such a nice feeling to immediately get the answer after sending my first message. 😁
The instruct being in english does not prevent gpt-3.5-turbo to answer in the same language as the last user message 🎉 I guess/hope it's the same for most LLMs.

Some UI findings:

  • The chattyUI expands too much vertically, making the entire modal-container__content overflow and scroll.
    image

  • It would be nice to have a visual feedback when the LLM answer is being computed. How about a simple loading spinner (NcLoadingIcon for example) where the next message will appear?

  • Something goes wrong when regenerating. The last user message (before the assistant message to regenerate) is deleted (from the UI only). It comes back after switching sessions or reloading. This does not happen if one asks to regenerate a message right after loading the session. I can give you more details if needed.

  • The instruct prefix is lost when chat_last_n_messages is exceeded. See inline comment in the controller.

lib/Controller/ChattyLLMController.php Show resolved Hide resolved
lib/Settings/Admin.php Outdated Show resolved Hide resolved
src/components/ChattyLLM/ChattyLLMInputForm.vue Outdated Show resolved Hide resolved
lib/Controller/ChattyLLMController.php Outdated Show resolved Hide resolved
lib/Controller/ChattyLLMController.php Outdated Show resolved Hide resolved
lib/Controller/ChattyLLMController.php Outdated Show resolved Hide resolved
lib/Controller/ChattyLLMController.php Outdated Show resolved Hide resolved
['name' => 'chattyLLM#getMessages', 'url' => '/chat/messages', 'verb' => 'GET'],
['name' => 'chattyLLM#generate', 'url' => '/chat/generate', 'verb' => 'GET'],
['name' => 'chattyLLM#regenerate', 'url' => '/chat/regenerate', 'verb' => 'GET'],
['name' => 'chattyLLM#generateTitle', 'url' => '/chat/generate_title', 'verb' => 'GET'],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At some point it would be nice to migrate to the new Route annotation by kate

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We would be losing support for the previous server versions if we do that now. Also, personally I would like to keep this alongside that, if possible, to have a quick look at all the endpoints declared in the app.

@julien-nc
Copy link
Member

Additional requirement: Mention in the README the length of the assistant memory (number of messages used to generate a new one). Mention it can be configured with an app config value.

@kyteinsky
Copy link
Contributor Author

There's no admin docs though, should I create one or just add it to the README in the root dir?

@kyteinsky kyteinsky force-pushed the feat/chatty-ui branch 3 times, most recently from 270d2f5 to 5443925 Compare May 15, 2024 13:19
@kyteinsky
Copy link
Contributor Author

It would be nice to have a visual feedback when the LLM answer is being computed. How about a simple loading spinner (NcLoadingIcon for example) where the next message will appear?

The input box shows the "Thinking" text and there is a breathing animation as well. Maybe it needs to be more prominent. Do you suggest a loading icon in addition to this?

Something goes wrong when regenerating. The last user message (before the assistant message to regenerate) is deleted (from the UI only). It comes back after switching sessions or reloading. This does not happen if one asks to regenerate a message right after loading the session. I can give you more details if needed.

Fixed.

The instruct prefix is lost when chat_last_n_messages is exceeded. See inline comment in the controller.

Fixed.

Copy link
Member

@julien-nc julien-nc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few more remarks:

  • Maybe we can find something better than "session" like "conversation" (which you already use in the NoSession empty content)
  • When clicking on "new session", it's not clear that one has to send a first message and THEN a new navigation entry will appear. How about showing a fake "new session" nav item when clicking on "new session"? But then it's not coherent with the initial state (no session selected, empty content displayed)... How about making it like in Talk?
    • Initial empty content says "Join a conversation or start a new one"
    • Click on new session creates a nav entry and the empty content becomes "Hello there! What can I help you with today?"
    • So the session would be created before the first message

@marcelklehr
Copy link
Member

There's no admin docs though, should I create one or just add it to the README in the root dir?

Could be done somewhere on this page? https://docs.nextcloud.com/server/latest/admin_manual/ai/app_assistant.html

@marcelklehr
Copy link
Member

I guess/hope it's the same for most LLMs.

It isn't, I think.

docs/admin/README.md Outdated Show resolved Hide resolved
Copy link
Member

@marcelklehr marcelklehr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless julien has more comments, I'd say it's good to go

@kyteinsky
Copy link
Contributor Author

There are a few more tweaks to go, proposed by the design team.

@kyteinsky kyteinsky requested a review from julien-nc June 13, 2024 12:12
src/components/ChattyLLM/ChattyLLMInputForm.vue Outdated Show resolved Hide resolved
<div v-else-if="sessions != null && sessions.length === 0" class="unloaded-sessions">
{{ t('assistant', 'No conversations yet') }}
</div>
<NcAppNavigationItem
Copy link
Member

@julien-nc julien-nc Jun 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With latest server's master, the actions are behind the assistant modal. Do you confirm?

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It just happens when there is another NcAppNavigation in the page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nope, pulled server master just now. Works on both chromium and firefox.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It just happens when there is another NcAppNavigation in the page.

yes it does, let me see if z-index or something can do the trick

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, I don't even have the popover mounted in my DOM. Can't really point at what's going wrong.

Copy link

@susnux susnux Jun 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While using the NcAppNavigation outside of the NcContent and within a dialog might work it is not supported usage of the component.

But a real problem here: It must not be used more than once on a page, it will break and even create invalid HTML content of the page. This will also cause any accessibility tests on that page to fail.

Instead the expected solution would probably be either using NcDialog with its native navigation slot (like app settings dialogs):

<NcDialog ...>
  <template #navigation>
    <ul>
      <NcListItem ...>
      <!-- .... -->
    </ul>
  </template>
  <!-- Content -->
</NcDialog>

or using NcModal with a custom content wrapper for layout:

<NcModal>
  <your-content-wrapper>
    <ul class="your-navigation">
      <NcListItem ...>
      <!-- .... -->
    </ul>
    <!-- Other content -->
  </your-content-wrapper>
</NcModal>

Copy link
Member

@julien-nc julien-nc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Psalm failure is caused by missing imports.

kyteinsky and others added 26 commits June 18, 2024 18:35
Signed-off-by: Anupam Kumar <[email protected]>
…ht if no session is selected

Signed-off-by: Julien Veyssier <[email protected]>
… assistant standalone page style

Signed-off-by: Julien Veyssier <[email protected]>
And show only the formatted local timestamp as the title of the
conversation session without the word Conversation

Signed-off-by: Anupam Kumar <[email protected]>
Co-authored-by: Marcel Klehr <[email protected]>
Signed-off-by: Anupam Kumar <[email protected]>
Co-authored-by: Marcel Klehr <[email protected]>
Signed-off-by: Anupam Kumar <[email protected]>
Signed-off-by: Anupam Kumar <[email protected]>
1. remove border from sidebar collapse button
2. new conversation button horizontal align with collapse btn and title
3. collapse btn align with avatars
4. left align in assistant admin settings

Signed-off-by: Anupam Kumar <[email protected]>
Signed-off-by: Anupam Kumar <[email protected]>
Signed-off-by: Anupam Kumar <[email protected]>
Signed-off-by: Anupam Kumar <[email protected]>
Signed-off-by: Anupam Kumar <[email protected]>
…one is smaller than the button

Signed-off-by: Julien Veyssier <[email protected]>
@julien-nc julien-nc merged commit ecf6294 into main Jun 18, 2024
11 checks passed
@marcelklehr
Copy link
Member

Super cool 🎉

@kyteinsky kyteinsky mentioned this pull request Jun 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants