ghonchu_rag 1.0.1 → 1.0.2

package/README.md

@@ -8,6 +8,15 @@ A themeable chatbot widget for frontend integration.
 npm install ghonchu_rag
 ```
 
+
+## Styling
+
+**Important:** You must import the CSS file for the widget to appear correctly.
+
+```javascript
+import 'ghonchu_rag/dist/styles.css';
+```
+
 ## Usage
 
 ### React

package/dist/styles.css

@@ -0,0 +1,419 @@
+/* ===============================
+   ROOT VARIABLES
+   =============================== */
+:root {
+  --ghonchu-bg-start: rgb(20, 15, 10);
+  --ghonchu-bg-end: rgb(40, 25, 15);
+  --ghonchu-amber-950: #451a03;
+  --ghonchu-orange-900: #7c2d12;
+  --ghonchu-yellow-900: #713f12;
+  --ghonchu-amber-400: #fbbf24;
+  --ghonchu-amber-300: #fcd34d;
+  --ghonchu-amber-200: #fde68a;
+  --ghonchu-amber-600: #d97706;
+  --ghonchu-orange-600: #ea580c;
+  --ghonchu-glass: rgba(254, 243, 199, 0.1);
+  --ghonchu-glass-border: rgba(254, 243, 199, 0.2);
+  --ghonchu-glow: var(--ghonchu-amber-400);
+}
+
+/* ===============================
+   ROOT
+   =============================== */
+#ghonchu-widget-root {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+/* ===============================
+   LAUNCHER
+   =============================== */
+.ghonchu-launcher {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(to right, var(--ghonchu-amber-600), var(--ghonchu-orange-600));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  animation: pulseGlow 2s infinite alternate;
+}
+
+@keyframes pulseGlow {
+  from {
+    box-shadow: 0 0 10px var(--ghonchu-glow);
+  }
+
+  to {
+    box-shadow: 0 0 30px var(--ghonchu-glow);
+  }
+}
+
+/* ===============================
+   THEME OVERRIDES
+   =============================== */
+.ghonchu-theme-default {
+  --ghonchu-glow: #fbbf24;
+}
+
+.ghonchu-theme-cyberpunk {
+  --ghonchu-glow: #00ffff;
+}
+
+.ghonchu-theme-professional {
+  --ghonchu-glow: #2563eb;
+}
+
+/* ===============================
+   CHAT WINDOW
+   =============================== */
+.ghonchu-chat-window {
+  width: 380px;
+  height: 550px;
+  max-height: 85vh;
+  background: linear-gradient(135deg, var(--ghonchu-amber-950), var(--ghonchu-orange-900), var(--ghonchu-yellow-900));
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--ghonchu-glass-border);
+  transform-origin: bottom right;
+  animation: openChat .25s ease;
+}
+
+.ghonchu-chat-window.closing {
+  animation: closeChat .2s ease forwards;
+}
+
+@keyframes openChat {
+  from {
+    opacity: 0;
+    transform: scale(.8) translateY(20px)
+  }
+}
+
+@keyframes closeChat {
+  to {
+    opacity: 0;
+    transform: scale(.8) translateY(20px)
+  }
+}
+
+/* ===============================
+   HEADER
+   =============================== */
+.ghonchu-header {
+  padding: 16px;
+  background: var(--ghonchu-glass);
+  backdrop-filter: blur(12px);
+}
+
+.ghonchu-title {
+  font-weight: 700;
+  background: linear-gradient(to right, var(--ghonchu-amber-400), var(--ghonchu-orange-600));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.ghonchu-controls button {
+  opacity: 0.8;
+  transition: opacity 0.2s;
+  color: var(--ghonchu-amber-400);
+}
+
+.ghonchu-controls button:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.ghonchu-status {
+  font-size: 0.9em;
+  color: var(--ghonchu-amber-200);
+  opacity: 0.9;
+}
+
+/* Scrollbar for history */
+.ghonchu-history-view::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ghonchu-history-view::-webkit-scrollbar-thumb {
+  background: var(--ghonchu-amber-600);
+  border-radius: 4px;
+}
+
+.ghonchu-status {
+  font-size: 0.9em;
+  color: var(--ghonchu-amber-200);
+  opacity: 0.9;
+}
+
+/* ===============================
+   MESSAGES
+   =============================== */
+.ghonchu-messages {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  scroll-behavior: smooth;
+  align-items: flex-start;
+}
+
+/* ===============================
+   ROW
+   =============================== */
+.ghonchu-message-wrapper {
+  display: flex;
+  max-width: 100%;
+}
+
+.msg-user-wrapper {
+  align-self: flex-end;
+  justify-content: flex-end;
+}
+
+.msg-bot-wrapper {
+  align-self: flex-start;
+  justify-content: flex-start;
+}
+
+/* ===============================
+   BUBBLES
+   =============================== */
+.msg-user,
+.msg-bot {
+  width: fit-content;
+  max-width: 75%;
+  border-radius: 16px;
+  flex: 0 0 auto;
+}
+
+.msg-bot {
+  background: var(--ghonchu-glass);
+  border: 1px solid var(--ghonchu-glass-border);
+  color: white;
+}
+
+.msg-user {
+  background: linear-gradient(to right, rgba(217, 119, 6, .2), rgba(234, 88, 12, .2));
+  border: 1px solid rgba(251, 191, 36, .3);
+  color: white;
+}
+
+/* ===============================
+   INNER MESSAGE
+   =============================== */
+.ghonchu-message {
+  padding: 12px 16px;
+  width: fit-content;
+  flex: 0 0 auto;
+  animation: messagePop .2s ease;
+}
+
+@keyframes messagePop {
+  from {
+    opacity: 0;
+    transform: scale(.95)
+  }
+}
+
+/* ===============================
+   MARKDOWN SUPPORT
+   =============================== */
+.ghonchu-message h1,
+.ghonchu-message h2,
+.ghonchu-message h3 {
+  margin: 6px 0;
+  color: var(--ghonchu-amber-200);
+}
+
+.ghonchu-message p {
+  margin: 4px 0;
+}
+
+.ghonchu-message strong {
+  color: var(--ghonchu-amber-400);
+}
+
+.ghonchu-message ul,
+.ghonchu-message ol {
+  padding-left: 18px;
+  margin: 4px 0;
+}
+
+.ghonchu-message li {
+  margin: 2px 0;
+}
+
+.ghonchu-message code {
+  background: rgba(0, 0, 0, .3);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-family: monospace;
+}
+
+.ghonchu-message pre {
+  background: #000;
+  padding: 10px;
+  border-radius: 8px;
+  overflow: auto;
+  margin: 8px 0;
+}
+
+.ghonchu-message a {
+  color: var(--ghonchu-amber-300);
+  text-decoration: underline;
+}
+
+/* ===============================
+   TYPING DOTS
+   =============================== */
+.ghonchu-typing {
+  display: flex;
+  gap: 6px;
+  padding: 12px;
+}
+
+.ghonchu-typing span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ghonchu-amber-400);
+  animation: blink 1.4s infinite both;
+}
+
+.ghonchu-typing span:nth-child(2) {
+  animation-delay: .2s
+}
+
+.ghonchu-typing span:nth-child(3) {
+  animation-delay: .4s
+}
+
+@keyframes blink {
+  0% {
+    opacity: .2
+  }
+
+  20% {
+    opacity: 1
+  }
+
+  100% {
+    opacity: .2
+  }
+}
+
+/* ===============================
+   INPUT
+   =============================== */
+.ghonchu-input-area {
+  padding: 12px;
+  display: flex;
+  gap: 10px;
+  background: var(--ghonchu-glass);
+}
+
+.ghonchu-input-area input {
+  flex: 1;
+  background: rgba(255, 255, 255, .08);
+  border-radius: 12px;
+  border: 1px solid var(--ghonchu-glass-border);
+  color: white;
+  padding: 10px;
+  outline: none;
+}
+
+.ghonchu-input-area input:focus {
+  border-color: var(--ghonchu-amber-600);
+}
+
+.ghonchu-send {
+  width: 52px;
+  border-radius: 12px;
+  background: linear-gradient(to right, var(--ghonchu-amber-600), var(--ghonchu-orange-600));
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.ghonchu-send:hover {
+  filter: brightness(1.1);
+}
+
+/* ===============================
+   MOBILE
+   =============================== */
+@media (max-width:600px) {
+  .ghonchu-chat-window {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+    max-height: none;
+  }
+
+  #ghonchu-widget-root {
+    inset: 0;
+  }
+}
+
+.msg-user-wrapper .ghonchu-avatar {
+  margin-left: 8px;
+}
+
+.msg-bot-wrapper .ghonchu-avatar {
+  margin-right: 8px;
+}
+
+/* ===============================
+   PROFESSIONAL THEME – CODE BLOCK POLISH
+   =============================== */
+
+.ghonchu-theme-professional .ghonchu-message pre {
+  background: #0f172a;
+  /* soft slate */
+  color: #e5e7eb;
+  padding: 14px 16px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-x: auto;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
+}
+
+/* Remove weird inner background */
+.ghonchu-theme-professional .ghonchu-message pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Inline code */
+.ghonchu-theme-professional .ghonchu-message code:not(pre code) {
+  background: #e5e7eb;
+  color: #111827;
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+/* Softer scrollbar inside code */
+.ghonchu-theme-professional .ghonchu-message pre::-webkit-scrollbar {
+  height: 6px;
+}
+
+.ghonchu-theme-professional .ghonchu-message pre::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, .25);
+  border-radius: 4px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghonchu_rag",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "description": "A themeable chatbot widget for frontend integration.",
   "main": "dist/index.js",
@@ -9,7 +9,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && copy src\\styles.css dist\\styles.css",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [