@hissuno/widget 0.1.0

package/dist/styles.css

@@ -0,0 +1,186 @@
+/**
+ * Hissuno Widget Styles
+ *
+ * These styles provide animations and enhancements for the widget.
+ * Import this file in your app for full widget functionality:
+ *
+ * import '@hissuno/widget/styles.css';
+ */
+
+/* Animation keyframes */
+@keyframes hissuno-bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes hissuno-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes hissuno-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hissuno-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes hissuno-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes hissuno-fade-in-backdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Widget container */
+.hissuno-widget {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Bubble button */
+.hissuno-bubble {
+  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+}
+
+.hissuno-bubble:hover {
+  transform: scale(1.05) !important;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
+}
+
+.hissuno-bubble:active {
+  transform: scale(0.98) !important;
+}
+
+/* Popup container */
+.hissuno-popup {
+  animation: hissuno-scale-in 0.2s ease-out;
+}
+
+/* Sidepanel container */
+.hissuno-sidepanel {
+  animation: hissuno-slide-in-right 0.3s ease-out;
+}
+
+/* Sidepanel backdrop */
+.hissuno-backdrop {
+  animation: hissuno-fade-in-backdrop 0.2s ease-out;
+}
+
+/* Messages container */
+.hissuno-messages {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+}
+
+.hissuno-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.hissuno-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.hissuno-messages::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 3px;
+}
+
+.hissuno-messages::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
+}
+
+/* Loading dots animation */
+.hissuno-loading-dot {
+  animation: hissuno-bounce 1s infinite;
+}
+
+/* Input focus states */
+.hissuno-popup input:focus,
+.hissuno-sidepanel input:focus {
+  border-color: #2563eb !important;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
+}
+
+/* Button hover states */
+.hissuno-popup button[type='submit']:not(:disabled):hover,
+.hissuno-sidepanel button[type='submit']:not(:disabled):hover {
+  background-color: #1d4ed8 !important;
+}
+
+/* Close/clear button hover states */
+.hissuno-popup button[aria-label]:hover,
+.hissuno-sidepanel button[aria-label]:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Dark theme hover states */
+.hissuno-popup[data-theme='dark'] button[aria-label]:hover,
+.hissuno-sidepanel[data-theme='dark'] button[aria-label]:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 440px) {
+  .hissuno-popup {
+    width: calc(100vw - 32px) !important;
+    left: 16px !important;
+    right: 16px !important;
+  }
+
+  .hissuno-sidepanel {
+    width: 100vw !important;
+  }
+}
+
+@media (max-height: 600px) {
+  .hissuno-popup {
+    height: calc(100vh - 100px) !important;
+    max-height: 480px !important;
+  }
+}
+
+/* Print styles - hide widget */
+@media print {
+  .hissuno-widget {
+    display: none !important;
+  }
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@hissuno/widget",
+  "version": "0.1.0",
+  "description": "Embeddable AI-powered support chat widget for Hissuno platform",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react && cp src/styles.css dist/styles.css",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@ai-sdk/react": "^1.2.12"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "hissuno",
+    "widget",
+    "support",
+    "ai",
+    "chat",
+    "customer-support",
+    "chatbot",
+    "react"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hissuno/hissuno.git",
+    "directory": "app/packages/widget"
+  },
+  "bugs": {
+    "url": "https://github.com/hissuno/hissuno/issues"
+  },
+  "homepage": "https://github.com/hissuno/hissuno/tree/main/app/packages/widget#readme"
+}
+