@sprout_ai_labs/sidekick 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,13 +7,17 @@ A Vue 3 plugin providing responsive chat components with custom Sidekick brandin
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
9
|
- 🎨 **Custom Branding**: Built-in Sidekick design with Rubik font
|
|
10
|
-
- 💬 **
|
|
11
|
-
-
|
|
10
|
+
- 💬 **Unified Components**: Ready-to-use chat interface with built-in state management
|
|
11
|
+
- 🎯 **Standalone Components**: Flexible, store-independent components for custom state management
|
|
12
|
+
- 🔄 **Shared State**: Automatic state synchronization (unified components)
|
|
13
|
+
- 🧠 **Thinking Process**: Collapsible thought displays with streaming animations
|
|
12
14
|
- 📱 **Responsive**: Mobile-friendly design
|
|
13
|
-
-
|
|
15
|
+
- 💻 **TypeScript**: Full TypeScript support with comprehensive types
|
|
14
16
|
- 🎨 **Tailwind CSS**: Styled with Tailwind CSS
|
|
15
17
|
- ⚡ **Vue 3**: Built for Vue 3 with Composition API
|
|
16
18
|
- 🔔 **Error Handling**: Built-in snackbar notifications for errors and success messages
|
|
19
|
+
- 📝 **Markdown Support**: Rich text rendering in messages
|
|
20
|
+
- 🔍 **KB Sources**: Citation support for knowledge base sources
|
|
17
21
|
|
|
18
22
|
## Demo
|
|
19
23
|
|
|
@@ -73,7 +77,13 @@ onMounted(() => {
|
|
|
73
77
|
|
|
74
78
|
## Components
|
|
75
79
|
|
|
76
|
-
|
|
80
|
+
The plugin provides two types of components:
|
|
81
|
+
|
|
82
|
+
### 🔄 Unified Components (with built-in store)
|
|
83
|
+
|
|
84
|
+
Perfect for quick setup with automatic state management:
|
|
85
|
+
|
|
86
|
+
#### SidekickChat
|
|
77
87
|
|
|
78
88
|
The main chat interface component for full-page chat experiences.
|
|
79
89
|
|
|
@@ -81,7 +91,7 @@ The main chat interface component for full-page chat experiences.
|
|
|
81
91
|
<SidekickChat />
|
|
82
92
|
```
|
|
83
93
|
|
|
84
|
-
|
|
94
|
+
#### SidekickChatPlugin
|
|
85
95
|
|
|
86
96
|
A floating chat widget component that can be positioned anywhere on the page.
|
|
87
97
|
|
|
@@ -89,13 +99,60 @@ A floating chat widget component that can be positioned anywhere on the page.
|
|
|
89
99
|
<SidekickChatPlugin />
|
|
90
100
|
```
|
|
91
101
|
|
|
92
|
-
###
|
|
102
|
+
### 🎯 Standalone Components (no store dependencies)
|
|
103
|
+
|
|
104
|
+
Perfect for custom state management and maximum flexibility:
|
|
105
|
+
|
|
106
|
+
```vue
|
|
107
|
+
<script setup>
|
|
108
|
+
import {
|
|
109
|
+
SidekickMessages,
|
|
110
|
+
SidekickChatInput,
|
|
111
|
+
SidekickCollapsibleThought,
|
|
112
|
+
SidekickCollapsibleThoughtStreaming
|
|
113
|
+
} from '@sprout_ai_labs/sidekick'
|
|
114
|
+
</script>
|
|
115
|
+
|
|
116
|
+
<template>
|
|
117
|
+
<!-- Message display with streaming support -->
|
|
118
|
+
<SidekickMessages
|
|
119
|
+
:messages="messages"
|
|
120
|
+
:is-typing="isTyping"
|
|
121
|
+
:current-thoughts="currentThoughts"
|
|
122
|
+
:current-chunked-message="currentChunkedMessage"
|
|
123
|
+
/>
|
|
124
|
+
|
|
125
|
+
<!-- Chat input with auto-expand -->
|
|
126
|
+
<SidekickChatInput
|
|
127
|
+
@submit="handleSubmit"
|
|
128
|
+
@input="handleInput"
|
|
129
|
+
/>
|
|
130
|
+
|
|
131
|
+
<!-- Completed thinking process -->
|
|
132
|
+
<SidekickCollapsibleThought
|
|
133
|
+
:steps="thoughtSteps"
|
|
134
|
+
:duration="thinkingDuration"
|
|
135
|
+
/>
|
|
136
|
+
|
|
137
|
+
<!-- Real-time streaming thoughts -->
|
|
138
|
+
<SidekickCollapsibleThoughtStreaming
|
|
139
|
+
:steps="liveThoughts"
|
|
140
|
+
/>
|
|
141
|
+
</template>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
**Standalone components** work via props and events only - no store required! Perfect for:
|
|
145
|
+
- Integrating into existing applications with custom state
|
|
146
|
+
- Building chat interfaces in Sidekick Central
|
|
147
|
+
- Maximum control over state management
|
|
148
|
+
|
|
149
|
+
See the [Standalone Components Documentation](https://spr-sidekick-docs.azurewebsites.net/api/standalone-components) for full details.
|
|
93
150
|
|
|
94
|
-
|
|
151
|
+
### 🛠️ Utility Components
|
|
95
152
|
|
|
96
|
-
- `
|
|
97
|
-
- `
|
|
98
|
-
- `
|
|
153
|
+
- `SidekickLoader` - Animated loading indicator
|
|
154
|
+
- `SidekickLogo` - Sidekick logo component
|
|
155
|
+
- `SidekickChatSources` - Knowledge base source citations
|
|
99
156
|
|
|
100
157
|
## Plugin Options
|
|
101
158
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sprout_ai_labs/sidekick",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A Vue 3 plugin providing responsive chat components with custom Sidekick branding and shared state management",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/sprout-sidekick.umd.cjs",
|