{"_id":"@capitol.ai/vue","_rev":"106-00ad25b0a1875dd387e08fa2ba9bd942","name":"@capitol.ai/vue","dist-tags":{"latest":"0.0.124"},"versions":{"0.0.1":{"name":"@capitol.ai/vue","version":"0.0.1","_id":"@capitol.ai/vue@0.0.1","maintainers":[{"name":"miguel.capitolai","email":"miguel@capitol.ai"}],"dist":{"shasum":"8ea2d15c1e58b8e3749f1f8bc76d29d983eb21de","tarball":"https://registry.npmjs.org/@capitol.ai/vue/-/vue-0.0.1.tgz","fileCount":19,"integrity":"sha512-jZXrOy8Ve6l+x9+vDxaMymemxO/jROT0xxrWwkn9uTCCAO8aDBKjGjK63EAA8Tmq2J5/mCf91oeshvXxQW0pRw==","signatures":[{"sig":"MEQCIGgUTMhfdzEtitDQwBSYUvCq6IKmy8vdX8Dxq898v5kHAiAKizUZ8saQTOqob5TOcgJQ6lUBuwIQJXW4Did+NzLzKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13783953},"main":"dist/index.cjs.js","type":"module","module":"dist/index.es.js","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.cjs.js"},"./styles.css":"./dist/styles.css"},"gitHead":"0e0a2e0968b3d40308aaec1ea5784fa15da63492","scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"miguel.capitolai","email":"miguel@capitol.ai"},"_npmVersion":"10.8.2","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n```\n\n## Available Components\n\n### CapitolAiWrapper\n\nProvides context and configuration for Capitol.ai components.\n\n**Props:**\n\n- `default`: Slot for child components to be wrapped.\n\n---\n\n### CreateStory\n\nThe `CreateStory` component provides a user interface for creating new stories in the **CapitolAI** application. It includes features for prompt input, source management, and story configuration.\n\n#### Features\n\n- Prompt-based story creation\n- Source management and integration\n- Customizable sidebar configuration\n- Project management capabilities\n- Guardrails for content validation\n- Custom UI components support\n- Mobile-responsive design\n\n#### Props\n\n| Property | Type | Default | Required | Description |\n| ------------------------- | -------- | ---------------------------------- | -------- | --------------------------------------------------------------------------------------------- |\n| enableProjects | boolean | false | No | Shows user's created projects or an option to create a new project under the prompt component |\n| enablePrompts | boolean | true | No | Whether to show prompt suggestions |\n| enableSources | boolean | true | No | Enables source inputs, allowing user-uploaded sources (PDFs or images) |\n| enabledConfigSidebar | boolean | true | No | Show document configuration sidebar on desktop, and bottom container on mobile |\n| pageTitle | string | 'Create Powerful Content' | No | Title displayed at the top of the component |\n| pageTitleBlock | Slot | - | No | Custom component for page title |\n| pageFooterBlock | Slot | - | No | Custom component for page footer |\n| placeholderPrompt | string | 'Describe what you want to create' | No | Placeholder for prompt input |\n| promptFooter | Slot | - | No | Footer of the prompt section |\n| callbackOnSubmit | function | - | No | Callback when story is submitted (alternative to @submit event) |\n| callbackOnError | function | - | No | Callback when error occurs (alternative to @error event) |\n| submitPromptButton | Slot | - | No | Custom submit button component |\n| sidebarHeaderContent | Slot | - | No | Custom sidebar header |\n| sidebarFooterContent | Slot | - | No | Custom sidebar footer |\n| guardrailsCustomMessage | Slot | - | No | Custom message for guardrail violations |\n| guardrailsCustomComponent | Slot | - | No | Custom component for guardrail violations. Slot props: { violations: array, confirmOverride: function } |\n| promptContent | Slot | - | No | Custom prompt area |\n| sidebarSettings | object | {…} | No | [See below for details](#sidebarsettings-configuration) |\n\n- `submit`: Emitted when a story is submitted. Payload: `{ storyId, promptInfo }`\n- `error`: Emitted when an error occurs. Payload: `error`\n\n#### `sidebarSettings` Configuration\n\nThe `sidebarSettings` prop is an object that configures which blocks and features are enabled in the configuration sidebar of the CreateStory component. It allows fine-grained control over the sidebar's content and behavior.\n\n| Property | Type | Default | Description |\n| ----------------------- | ------- | ------- | --------------------------------- |\n| enabledLayoutBlock | Boolean | true | Show layout settings |\n| enabledTextBlock | Boolean | true | Show text block |\n| enabledDataSourcesBlock | Boolean | true | Show data source settings |\n| enabledImageBlock | Boolean | true | Show image settings |\n| enabledChartBlock | Boolean | true | Show chart block |\n| enabledQuoteBlock | Boolean | true | Show quote block |\n| enabledMetricBlock | Boolean | true | Show metric block |\n| enabledTableBlock | Boolean | true | Show table data block |\n| enabledTweetBlock | Boolean | true | Show tweet block |\n| useMinutesOfReading | Boolean | false | Enable minutes of reading feature |\n| showFormatList | Boolean | true | Show format list |\n\n#### Example Usage\n\n```vue\n\n \n\n\n\n```\n\n---\n\n### EditorStory\n\nThe `EditorStory` component is a comprehensive editor interface for story creation and editing in the **CapitolAI** application.\n\n#### Features\n\n- Rich text editing capabilities\n- Mobile-responsive with swipable container\n- Sidebar configuration for content blocks\n- Support for citations and AI-generated content\n- Project management, export, sharing, and feedback systems\n- Guardrails for content validation\n\n#### Props\n\n| Property | Type | Default | Required | Description |\n| ------------------------------ | -------- | ------------------------------- | -------- | ------------------------------------------------------------------------- |\n| storyId | string | - | Yes | Unique ID of the story |\n| pipelineId | string | - | No | Unique ID of the pipeline. Note: if `pipelineId` is provided, the config for the pipeline will overwrite the config provided by `formatCustomConfigs` |\n| enableProjects | boolean | false | No | Enables project management |\n| sidebarSettings | object | {…} | No | Sidebar feature configuration. [See more](#sidebarsettings-configuration) |\n| formatCustomConfigs | object | - | No | Custom formatting options |\n| enableDocRemix | boolean | true | No | Enables document remixing |\n| enableHistory | boolean | false | No | Enables history tracking |\n| enableExportToGoogle | boolean | false | No | Google export functionality |\n| enableDownload | boolean | false | No | Story download option |\n| enabledShare | boolean | false | No | Share feature |\n| enableHeaderMenu | boolean | - | No | Header menu |\n| enabledConfigSidebar | boolean | true | No | Config sidebar |\n| headerContent | Slot | - | No | Custom header |\n| storyFooter | Slot | - | No | Footer content |\n| citationsDisclaimer | Slot | - | No | Citations disclaimer |\n| aiGenerated | boolean | false | No | AI-generated indicator |\n| aiGeneratedText | string | - | No | AI-generated content |\n| sourceIds | string[] | - | No | Array of source IDs |\n| preProcessedSources | string[] | - | No | Pre-processed sources |\n| tags | array | - | No | Story tags |\n| enabledFeedback | boolean | true | No | Feedback system |\n| enabledStoryHeader | boolean | true | No | Story header |\n| enableStoryTitle | boolean | - | No | Story title |\n| enabledTurnIntoSelector | boolean | true | No | Content type selector |\n| enableUnusedSourcesModal | boolean | true | No | Modal for unused sources |\n| remixCallbackOnSubmit | function | (promptInfo: object) => void | No | Callback on remix submit |\n| historyCallbackOnSubmit | function | (params: object) => void | No | Callback on history action |\n| callBackSideMenu | function | (props: object) => void | No | Side menu interactions |\n| getStoryHeadline | function | (storyHeadline: string) => void | No | Retrieve story headline |\n| callbackOnError | function | (error: string) => void | No | Error callback |\n| callbackOnStoryGenerationError | function | () => void | Yes | Callback on story generation error |\n| sidebarHeaderContent | Slot | - | No | Sidebar header content. Slot props: { ...ConfigSideBarContentProps } |\n| sidebarFooterContent | Slot | - | No | Sidebar footer content. Slot props: { ...ConfigSideBarContentProps } |\n| remixHistoryLeftContent | Slot | - | No | Remix history left section. Slot props: { author?: object } |\n| storyErrorModal | Slot | - | No | Custom error modal. Slot props: { ...StoryErrorModalProps } |\n| guardrailsCustomMessage | Slot | - | No | Custom message for guardrails. Slot props: { violations: array } |\n| guardrailsCustomComponent | Slot | - | No | Custom component for guardrails. Slot props: { violations: array, confirmOverride: function } |\n\n#### Events\n\n- `story-generation-error`: Emitted when story generation fails.\n\n#### Example Usage\n\n```vue\n\n \n\n\n\n```\n\n---\n\n## Proxy Configuration\n\nTo handle Capitol.ai API requests, you need to configure a proxy in your Vue project. If you're using Vite, add the following to your `vite.config.ts`:\n\n```typescript\nimport vue from '@vitejs/plugin-vue';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n plugins: [vue()],\n server: {\n proxy: {\n '^/proxy/capitolai/api/v(\\\\d+)': {\n target: 'http://localhost:8000/api',\n changeOrigin: true,\n rewrite: (path: string) =>\n path.replace(/^\\/proxy\\/capitolai\\/api\\/v(\\d+)/, '/v$1'),\n },\n },\n },\n});\n```\n\n---\n\n## Styles Customization (Optional)\n\nYou can customize the appearance of the Capitol.ai Vue components by adding CSS variables to your project's styles.\n\n```css\n:root {\n --capitol-accent-color: #1d76f3;\n --capitol-font-family: 'Akkurat Pro';\n --capitol-border-radius: 8px;\n --capitol-prompt-background-color: #ffffff;\n --capitol-sidebar-background-color: #ffffff;\n --capitol-story-background-color: #ffffff;\n}\n```\n\nTo override, add these variables to your main CSS file (e.g., `App.css` or `main.css`):\n\n```css\n:root {\n --capitol-accent-color: #00a86b;\n --capitol-font-family: 'Roboto', sans-serif;\n /* Add other variables you want to customize */\n}\n```\n\nThis example changes the accent color to green and the font to Roboto. You can adjust any of the variables to match your application's design.\n\nNote: Customization is entirely optional. The components will use their default styles if you don't specify these variables.\n\n## ClassNames for Customization (Optional)\n\nCapitol.ai Vue components provide several predefined class names that you can use to customize their styles. Below is a list of available class names along with a brief description of their purpose:\n\n- **capitol-config-sidebar**: The main container for the configuration sidebar.\n- **capitol-config-sidebar\\_\\_scrollable**: A scrollable area within the configuration sidebar.\n- **capitol-config-sidebar\\_\\_divider**: A divider element within the configuration sidebar.\n- **capitol-config-sidebar\\_\\_format-list**: The list of formats available in the configuration sidebar.\n- **capitol-config-sidebar\\_\\_footer**: The footer area of the configuration sidebar.\n- **capitol-config-sidebar\\_\\_item**: An individual item within the configuration sidebar.\n- **capitol-config-sidebar\\_\\_header**: The header area of the configuration sidebar.\n- **capitol-prompt-container**: The container for the prompt input area.\n- **capitol-suggestions**: The container for suggestion elements.\n- **capitol-suggestions\\_\\_title**: The title element for the suggestions block.\n- **capitol-suggestions\\_\\_options**: The container for individual suggestion options.\n- **capitol-suggestion**: The container element for an individual suggestion.\n- **capitol-suggestion\\_\\_title**: The title element for the suggestion.\n- **capitol-suggestion\\_\\_icon**: The icon associated with each suggestion.\n\n### Example of Customizing Styles\n\nYou can target these class names in your CSS to apply custom styles. For example:\n\n```css\n.capitol-config-sidebar {\n background-color: #f8f9fa;\n}\n.capitol-suggestions__title {\n font-weight: bold;\n color: #1d76f3;\n}\n.capitol-config-sidebar__footer {\n padding: 10px;\n text-align: center;\n}\n```\n\nFeel free to modify these styles to match your application's design!\n\n---\n\n## Proprietary License\n\nCopyright (c) 2024-2025 Capitol AI. All rights reserved.\n\n1. **Definitions**: “Software” refers to the Capitol AI Vue Components, including all source code, object code, documentation, and related materials provided by Capitol AI.\n\n2. **License Grant**: Subject to the terms of this agreement, Capitol AI grants you a non-exclusive, non-transferable, limited license to use the Software solely for your internal, non-commercial purposes.\n\n3. **Restrictions**: You may not:\n a) Modify, adapt, alter, translate, or create derivative works of the Software\n b) Reverse engineer, decompile, disassemble, or otherwise attempt to derive the source code of the Software\n c) Redistribute, sublicense, rent, lease, or sell the Software\n d) Remove or alter any proprietary notices or labels on the Software\n e) Use the Software for any commercial purpose without explicit written consent from Capitol AI\n\n4. **Commercial Use**: Any use of the Software for commercial purposes, including but not limited to selling products or services that utilize the Software, is strictly prohibited without explicit written consent from Capitol AI. To obtain consent for commercial use, please contact Capitol AI directly.\n\n5. **Ownership**: Capitol AI retains all right, title, and interest in and to the Software, including all intellectual property rights therein.\n\n6. **Termination**: This license is effective until terminated. Capitol AI may terminate this license at any time if you fail to comply with any term of this agreement.\n\n7. **Disclaimer of Warranty**: THE SOFTWARE IS PROVIDED “AS IS” WITHOUT WARRANTY OF ANY KIND. CAPITOL AI DISCLAIMS ALL WARRANTIES, WHETHER EXPRESS, IMPLIED, OR STATUTORY.\n\n8. **Limitation of Liability**: IN NO EVENT SHALL CAPITOL AI BE LIABLE FOR ANY SPECIAL, INCIDENTAL, INDIRECT, OR CONSEQUENTIAL DAMAGES WHATSOEVER ARISING OUT OF THE USE OF OR INABILITY TO USE THE SOFTWARE.\n\n9. **Governing Law**: This agreement shall be governed by and construed in accordance with the laws of Delaware without regard to its conflict of law provisions.\n\nBy using the Software, you acknowledge that you have read this agreement, understand it, and agree to be bound by its terms and conditions.\n","readmeFilename":"README.md"}