diff --git a/.agent/skills/frontend_design/lib-vue-components.md b/.agent/skills/frontend_design/lib-vue-components.md index b0f75de..78697c6 100644 --- a/.agent/skills/frontend_design/lib-vue-components.md +++ b/.agent/skills/frontend_design/lib-vue-components.md @@ -1,40 +1,86 @@ -# Lib Vue Components Documentation +# PilotUI - LLM Documentation -Generated on: 2025-11-16T14:05:12.514Z +> Generated on: 3/4/2026, 4:13:37 PM + +## 🤖 LLM Instructions +This document is optimized for Large Language Models. It contains the complete documentation for **PilotUI**, a Vue 3 component library. + +### How to use this doc: +- **Component Search**: Use the Table of Contents below to find specific components. +- **Code Examples**: All component examples are provided in fenced code blocks with language identifiers. +- **Prop Tables**: Component properties, events, and slots are documented in Markdown tables. +- **Implementation**: When asked to implement a UI, refer to the available components and their usage patterns described here. + +--- + +## 📋 Table of Contents + +### Getting Started +- [Installation](#getting-started-installation) + +### Getting Started How To +- [Use](#getting-started-how-to-use) + +### Getting Started Global +- [Configuration](#getting-started-global-configuration) + +### Shell +- [Approot](#shell-approot) +- [Dashboardshell](#shell-dashboardshell) +- [Horizontalmenu](#shell-horizontalmenu) +- [Sidebarmenu](#shell-sidebarmenu) + +### Icons Alternative Icon +- [Packs](#icons-alternative-icon-packs) + +### Icons Icon +- [Gallery](#icons-icon-gallery) + +### Utilities +- [Toast](#utilities-toast) + +### Complex +- [Modal](#complex-modal) +- [Pagination](#complex-pagination) + +### Elements +- [Avatar](#elements-avatar) +- [Avatargroup](#elements-avatargroup) +- [Button](#elements-button) +- [Card](#elements-card) +- [Dropdown](#elements-dropdown) +- [Iconbutton](#elements-iconbutton) +- [Progress](#elements-progress) +- [Tabs](#elements-tabs) +- [Tooltip](#elements-tooltip) + +### Form +- [Checkboxinput](#form-checkboxinput) +- [Fileinputbutton](#form-fileinputbutton) +- [Fileinputcombo](#form-fileinputcombo) +- [Input](#form-input) +- [Inputgroup](#form-inputgroup) +- [Select](#form-select) +- [Switchball](#form-switchball) +- [Textarea](#form-textarea) --- + ## Getting Started / Installation +**Source URL**: http://localhost:6006/?path=/docs/getting-started-installation--docs + ### Installation Guide #### Prerequisites - A working Vue 3 or Nuxt 3 project -- GitHub account with package access - Node.js and npm/yarn installed #### Setup Steps -##### 1\. GitHub Authentication - -1. Create a GitHub personal access token: - - - Go to GitHub Settings → Developer Settings → Personal Access Tokens - - Generate a new token with `read:packages` permission - - Copy the generated token - - For detailed instructions, watch this guide -2. Create an `.npmrc` file in your project root: - - ``` - @codebridger:registry=https://npm.pkg.github.com - //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN - ``` - - Replace `YOUR_GITHUB_TOKEN` with the token you created. - - -##### 2\. Package Installation +##### 1\. Package Installation Install the package using npm or yarn: @@ -138,8 +184,11 @@ After installation, you can start using the components in your application. Chec --- + ## Getting Started How To / Use +**Source URL**: http://localhost:6006/?path=/docs/getting-started-how-to-use--docs + ### Component library We are two indie developers who love to build things. We are building a component library for vue and nuxt projects. it inspired by `vristo` and powered by `tailwindcss`. @@ -204,8 +253,11 @@ appStore.setTheme("dark"); --- + ## Getting Started Global / Configuration +**Source URL**: http://localhost:6006/?path=/docs/getting-started-global-configuration--docs + #### Using `useAppStore` Import and use the `useAppStore` in your components to access and modify the global state. @@ -323,8 +375,11 @@ function toggleSidebar() { --- + ## Shell / Approot +**Source URL**: http://localhost:6006/?path=/docs/shell-approot--docs + ### AppRoot Top-level shell that wires global layout concerns: color scheme, direction (LTR/RTL), and layout style. Wrap your application to ensure consistent theming and structure. @@ -355,8 +410,11 @@ Use as the root wrapper for app pages/stories. Combine with DashboardShell for f --- + ## Shell / Dashboardshell +**Source URL**: http://localhost:6006/?path=/docs/shell-dashboardshell--docs + ### DashboardShell Composable page shell providing header, horizontal menu, sidebar, content, and footer slots. Supports vertical and horizontal navigation styles. @@ -425,8 +483,11 @@ Wrap application pages to provide consistent navigation and scaffolding. Fill sl --- + ## Shell / Horizontalmenu +**Source URL**: http://localhost:6006/?path=/docs/shell-horizontalmenu--docs + ### HorizontalMenu Responsive top navigation bar rendering a hierarchy of items with icons and labels. Integrates with the shell store to switch layout style. @@ -974,8 +1035,11 @@ const items = [ --- + ## Shell / Sidebarmenu +**Source URL**: http://localhost:6006/?path=/docs/shell-sidebarmenu--docs + ### SidebarMenu ### SidebarMenu @@ -1579,8 +1643,11 @@ const items = [ --- + ## Icons Alternative Icon / Packs +**Source URL**: http://localhost:6006/?path=/docs/icons-alternative-icon-packs--docs + ### Alternative Icon Packs Using Iconify as an Alternative Icon Pack with Tailwind CSS @@ -1641,8 +1708,11 @@ For more details on using Iconify with Tailwind (and other setup options like ad --- + ## Icons Icon / Gallery +**Source URL**: http://localhost:6006/?path=/docs/icons-icon-gallery--docs + ### Icon Gallery To use icons listed in this page you need to import the `icon` component and provide a name from the list below. @@ -1999,8 +2069,11 @@ IconStar --- + ## Utilities / Toast +**Source URL**: http://localhost:6006/?path=/docs/utilities-toast--docs + ### Toast Utility Functions The `toast.ts` file provides utility functions for displaying toast notifications using SweetAlert2. These functions allow you to show different types of toast messages with various configurations. @@ -2057,8 +2130,11 @@ toastInfo('This is an info toast message'); --- + ## Complex / Modal +**Source URL**: http://localhost:6006/?path=/docs/complex-modal--docs + ### Modal A flexible dialog for confirmations, forms, and rich content. Provides slots for trigger, title, default content, and footer; supports sizes, vertical alignment, and animations. @@ -2100,8 +2176,8 @@ Use for tasks that require focused attention. Keep content concise; avoid nestin This is a basic modal with default settings. You can customize the content, size, and behavior.
This modal uses a custom trigger button instead of the default one.
-This modal uses a zoom-in animation effect. Try opening it again to see the animation.
-
---
-A high-fidelity platform that transforms long-form video content into concise, meaningful highlights. By leveraging **Google Gemini's** multimodal intelligence and precise **FFmpeg** engineering, it provides a seamless chat-based refinement experience.
+ **FrameFlow** is a high-fidelity multimedia platform that bridges the gap between raw video/image assets and creative intelligence. By fusing **Google Gemini's** multimodal brain with precise **FFmpeg** engineering, FrameFlow transforms how you consume, extract, and generate media.
+
+
+
Total Cost: ${{ totalCost.toFixed(4) }} @@ -37,6 +43,12 @@ const totalCost = computed(() => { return videoStore.messages.reduce((acc, msg) => acc + (msg.cost || 0), 0) }) +const activeTasksText = computed(() => { + if (!videoStore.activeBackgroundTasks.length) return '' + const names = videoStore.activeBackgroundTasks.map(t => t.name) + return `Background Tasks:\n${names.join('\n')}` +}) + const handleOpenFolder = async () => { if (videoStore.currentThreadId) { // @ts-ignore diff --git a/src/renderer/src/components/chat/ChatInput.vue b/src/renderer/src/components/chat/ChatInput.vue index cbeaa57..36cbaed 100644 --- a/src/renderer/src/components/chat/ChatInput.vue +++ b/src/renderer/src/components/chat/ChatInput.vue @@ -1,43 +1,33 @@