@courseecho/ai-widget-vue 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2026 CourseEcho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+For more information about CourseEcho, visit https://courseecho.com

package/README.md

@@ -0,0 +1,336 @@
+# 💚 @courseecho/ai-widget-vue
+
+**Vue 3 component for AI chat widget** - Intelligent chat for Vue applications.
+
+[![npm version](https://img.shields.io/npm/v/@courseecho/ai-widget-vue.svg)](https://www.npmjs.com/package/@courseecho/ai-widget-vue)
+[![Vue](https://img.shields.io/badge/Vue-3.0%2B-4FC08D)](https://vuejs.org)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+## 📖 Overview
+
+A **Vue 3 component** for seamless integration of CourseEcho AI chat into your Vue applications.
+
+- ✅ Vue 3.0+
+- ✅ Composition API & `<script setup>` support
+- ✅ TypeScript fully typed
+- ✅ 12KB minified
+- ✅ Nuxt 3 compatible
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+npm install @courseecho/ai-widget-vue @courseecho/ai-core-sdk
+```
+
+### Basic Usage
+
+```vue
+<template>
+  <AiChatWidget
+    :api-endpoint="apiEndpoint"
+    :context="context"
+    :jwt-token="jwtToken"
+  />
+</template>
+
+<script setup>
+import { AiChatWidget } from '@courseecho/ai-widget-vue';
+
+const apiEndpoint = 'https://api.courseecho.com/api';
+const context = {
+  pageType: 'course',
+  entityId: 'course-123',
+  userId: 'user-456'
+};
+const jwtToken = 'your-jwt-token';
+</script>
+```
+
+## 🎯 Props
+
+```typescript
+interface AiChatWidgetProps {
+  apiEndpoint: string;              // Your API endpoint
+  context: ContextData;             // Page context
+  jwtToken?: string;                // JWT authentication
+  apiKey?: string;                  // Alternative: API key
+  theme?: 'light' | 'dark';         // Theme (default: 'light')
+  position?: PositionType;          // Widget position
+  class?: string;                   // Custom CSS class
+}
+
+type PositionType = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+```
+
+## 🪣 Composables
+
+Use composables for fine-grained control:
+
+```typescript
+import {
+  useAiChat,
+  useAiMessages,
+  useAiLoading,
+  useAiError,
+  useAiContext
+} from '@courseecho/ai-widget-vue';
+
+export default {
+  setup() {
+    const { sendMessage, state } = useAiChat({
+      apiEndpoint: 'https://api.courseecho.com/api',
+      context: { pageType: 'course' }
+    });
+
+    const messages = useAiMessages();
+    const loading = useAiLoading();
+    const error = useAiError();
+    const { context, setContext } = useAiContext();
+
+    return {
+      messages,
+      loading,
+      error,
+      sendMessage,
+      setContext
+    };
+  }
+};
+```
+
+### Available Composables
+
+| Composable | Returns | Purpose |
+|-----------|---------|---------|
+| `useAiChat()` | `{ sendMessage, state }` | Main chat composable |
+| `useAiMessages()` | `Ref<ChatMessage[]>` | Get messages ref |
+| `useAiLoading()` | `Ref<boolean>` | Get loading state ref |
+| `useAiError()` | `Ref<string \| null>` | Get error ref |
+| `useAiContext()` | `{ context, setContext }` | Manage context |
+
+## 💡 Examples
+
+### Example 1: Course Page with `<script setup>`
+
+```vue
+<template>
+  <div class="course-page">
+    <h1>JavaScript Fundamentals</h1>
+    <main>
+      <!-- Course content -->
+    </main>
+
+    <AiChatWidget
+      api-endpoint="https://api.courseecho.com/api"
+      :context="courseContext"
+      :jwt-token="userToken"
+      position="bottom-right"
+      theme="light"
+    />
+  </div>
+</template>
+
+<script setup>
+import { AiChatWidget } from '@courseecho/ai-widget-vue';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const userToken = ref('user-token');
+
+const courseContext = computed(() => ({
+  pageType: 'course',
+  entityId: route.params.courseId,
+  userId: 'current-user-id'
+}));
+</script>
+```
+
+### Example 2: Theme Reactivity
+
+```vue
+<template>
+  <div>
+    <button @click="isDark = !isDark">
+      {{ isDark ? '☀️' : '🌙' }}
+    </button>
+
+    <AiChatWidget
+      api-endpoint="..."
+      :context="context"
+      :theme="isDark ? 'dark' : 'light'"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { AiChatWidget } from '@courseecho/ai-widget-vue';
+
+const isDark = ref(false);
+const context = { pageType: 'app' };
+</script>
+```
+
+### Example 3: Custom Chat UI with Composable
+
+```vue
+<template>
+  <div class="custom-chat">
+    <div class="messages">
+      <div
+        v-for="msg in messages"
+        :key="msg.id"
+        :class="['message', msg.role]"
+      >
+        {{ msg.content }}
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Thinking...</div>
+    <div v-if="error" class="error">{{ error }}</div>
+
+    <input
+      @keyup.enter="handleSendMessage"
+      placeholder="Ask a question..."
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  useAiChat,
+  useAiMessages,
+  useAiLoading,
+  useAiError
+} from '@courseecho/ai-widget-vue';
+
+const { sendMessage } = useAiChat({
+  apiEndpoint: 'https://api.courseecho.com/api',
+  context: { pageType: 'course' }
+});
+
+const messages = useAiMessages();
+const loading = useAiLoading();
+const error = useAiError();
+
+const handleSendMessage = async (e) => {
+  const text = e.target.value;
+  if (text) {
+    await sendMessage(text);
+    e.target.value = '';
+  }
+};
+</script>
+```
+
+### Example 4: Nuxt 3 Integration
+
+```vue
+<!-- pages/course/[id].vue -->
+<template>
+  <div>
+    <h1>{{ course.title }}</h1>
+    <AiChatWidget
+      api-endpoint="https://api.courseecho.com/api"
+      :context="courseContext"
+    />
+  </div>
+</template>
+
+<script setup>
+import { AiChatWidget } from '@courseecho/ai-widget-vue';
+
+definePageMeta({
+  layout: 'course'
+});
+
+const route = useRoute();
+const { data: course } = await useFetch(`/api/courses/${route.params.id}`);
+
+const courseContext = computed(() => ({
+  pageType: 'course',
+  entityId: route.params.id,
+  userId: useAuthStore().user.id
+}));
+</script>
+```
+
+## 🎨 Styling
+
+Override default styles with scoped CSS:
+
+```vue
+<style scoped>
+:deep(.ai-chat-widget) {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+:deep(.ai-chat-message) {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
+```
+
+## 🔐 Authentication
+
+### Using JWT
+
+```vue
+<AiChatWidget
+  api-endpoint="..."
+  :context="context"
+  :jwt-token="userStore.token"
+/>
+```
+
+### Using API Key
+
+```vue
+<AiChatWidget
+  api-endpoint="..."
+  :context="context"
+  api-key="sk-123456789..."
+/>
+```
+
+## 📦 Package Contents
+
+```
+dist/
+├── index.mjs          # ES Module
+├── index.cjs          # CommonJS
+├── index.d.ts         # TypeScript definitions
+└── ...
+```
+
+## 🌍 About CourseEcho
+
+[CourseEcho](https://courseecho.com) powers intelligent education with AI.
+
+- 🌐 Website: https://courseecho.com
+- 📧 Support: support@courseecho.com
+- 📱 Product: https://courseecho.com/products/ai-widget
+
+## 📄 License
+
+MIT © 2026 CourseEcho
+
+## 📞 Support
+
+- 📖 Docs: https://courseecho.com/docs
+- 🐛 Issues: [GitHub Issues](https://github.com/courseecho/ai-widget-sdk/issues)
+- 💬 Chat: [Discord](https://discord.gg/courseecho)
+
+---
+
+**Other frameworks:**
+- [React](../ai-widget-react)
+- [Angular 19+](../ai-widget-angular)
+- [jQuery](../ai-widget-jquery)
+- [Node.js](../ai-client-node)
+- [Core SDK](../ai-core-sdk)

package/package.json

@@ -1,32 +1,34 @@
 {
-  "name": "@courseecho/ai-widget-vue",
-  "version": "1.0.0",
-  "description": "Vue 3 component for AI chat widget",
-  "license": "MIT",
-  "author": "CourseEcho",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "files": ["dist"],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
-  },
-  "peerDependencies": {
-    "vue": "^3.0.0",
-    "@courseecho/ai-core-sdk": "^1.0.0"
-  },
-  "devDependencies": {
-    "vue": "^3.3.0",
-    "@courseecho/ai-core-sdk": "^1.0.0",
-    "typescript": "^5.3.0",
-    "@types/node": "^20.0.0"
-  }
+    "name":  "@courseecho/ai-widget-vue",
+    "version":  "1.0.2",
+    "description":  "Vue 3 component for AI chat widget",
+    "license":  "MIT",
+    "author":  "CourseEcho",
+    "main":  "dist/index.cjs",
+    "module":  "dist/index.mjs",
+    "types":  "dist/index.d.ts",
+    "exports":  {
+                    ".":  {
+                              "import":  "./dist/index.mjs",
+                              "require":  "./dist/index.cjs",
+                              "types":  "./dist/index.d.ts"
+                          }
+                },
+    "files":  [
+                  "dist"
+              ],
+    "scripts":  {
+                    "build":  "tsc",
+                    "dev":  "tsc --watch"
+                },
+    "peerDependencies":  {
+                             "vue":  "^3.0.0",
+                             "@courseecho/ai-core-sdk":  "^1.0.0"
+                         },
+    "devDependencies":  {
+                            "vue":  "^3.3.0",
+                            "@courseecho/ai-core-sdk":  "^1.0.0",
+                            "typescript":  "^5.3.0",
+                            "@types/node":  "^20.0.0"
+                        }
 }