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.

Sign up for GitHub

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

fix: Embedded AI conversation cannot open the tool box #2070

Merged
merged 1 commit into from
Jan 22, 2025
Merged

fix: Embedded AI conversation cannot open the tool box #2070

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/src/components/ai-chat/component/control/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<vue3-menus v-model:open="isOpen" :event="eventVal" :menus="menus" hasIcon>
<vue3-menus v-model:open="isOpen" :event="eventVal" :zIndex="9999" :menus="menus" hasIcon>
<template #icon="{ menu }"
><AppIcon v-if="menu.icon" :iconName="menu.icon"></AppIcon
></template>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The updated vue3-menus component includes an additional prop :zIndex="9999" which sets the z-index of the menu to 9999, ensuring that it appears above other elements on the page. Additionally, if you meant to add another template slot (#title) instead of just #icon, this could be added similarly:

<template>
  <div>
    <vue3-menus v-model:open="isOpen" :event="eventVal" :menus="menus" hasIcon @select="handleSelect">
      <!-- Existing icon-slot -->
      <template #icon="{ menu }"
        ><AppIcon v-if="menu.icon" :iconName="menu.icon"></AppIcon></template>

      <!-- Additional title-slot -->
      <template #title>
        <span>{{ selectedTitle }}</span> <!-- Use this variable to display the selected subheading -->
      </template>
      
      <!-- Example of using select event for further manipulation -->
      <template #option="{ option }">{{ option.title }}
        &nbsp; <em>(Click to show)</em>
      </template>
    </vue3-menus>
  </div>
</template>

Here's how you can implement a click handler in Vue.js and use it in your method definitions below:

{
  data() {
    return {
      isOpen: false,
      menus: [
        { subheadings: [{ id: 'a', title: 'Sub Heading' }] },
        // Add more items...
      ],
      selectedTitle: null,
      lastSelectedOption: null,
    };
  },

  methods: {
    handleSelect(option) {
      // Handle when an item is clicked
      this.lastSelectedOption = option;
      console.log('Selected Option:', this.lastSelectedOption);
      this.selectedTitle = option.subheadings[0].title;  // Update selected title based on current selection
      
      /**
       * Optional Functionality:
       *
       * If you want to expand details only after selecting one of them (e.g., toggle visible divs),
       * make sure to modify or create separate components/props/methods within App.vue 
       * where these functionalities occur.
       */
     
      }
    },
    
    handleClickOutside(event) {
      if (!this.$el.contains(event.target)) {
        this.isOpen = false;
      }
    }
}

This handles cases where the user clicks outside the vue3-menus element to automatically close it.

Also ensure your global app has registered necessary events to catch external interactions and trigger the state change appropriately via $refs.

Keep in mind, depending on your specific application structure and requirements, you might need to integrate some dynamic styling and event handling logic beyond this simple setup. Please customize accordingly!

Expand Down
Loading