ghonchu_rag 1.0.2 → 1.0.3

package/dist/styles.css

@@ -1,7 +1,25 @@
-/* ===============================
-   ROOT VARIABLES
-   =============================== */
-:root {
+/* =====================================================
+   HARD ISOLATION — VERY IMPORTANT
+===================================================== */
+
+#ghonchu-widget-root {
+  all: initial;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 2147483647;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+#ghonchu-widget-root * {
+  box-sizing: border-box;
+}
+
+/* =====================================================
+   VARIABLES (scoped)
+===================================================== */
+
+#ghonchu-widget-root {
   --ghonchu-bg-start: rgb(20, 15, 10);
   --ghonchu-bg-end: rgb(40, 25, 15);
   --ghonchu-amber-950: #451a03;
@@ -17,20 +35,10 @@
   --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;
@@ -53,25 +61,14 @@
   }
 }
 
-/* ===============================
-   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 {
+  position: absolute;
+  bottom: 80px;
+  right: 0;
   width: 380px;
   height: 550px;
   max-height: 85vh;
@@ -92,20 +89,21 @@
 @keyframes openChat {
   from {
     opacity: 0;
-    transform: scale(.8) translateY(20px)
+    transform: scale(.8) translateY(20px);
   }
 }
 
 @keyframes closeChat {
   to {
     opacity: 0;
-    transform: scale(.8) translateY(20px)
+    transform: scale(.8) translateY(20px);
   }
 }
 
-/* ===============================
+/* =====================================================
    HEADER
-   =============================== */
+===================================================== */
+
 .ghonchu-header {
   padding: 16px;
   background: var(--ghonchu-glass);
@@ -119,42 +117,15 @@
   -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;
+  font-size: .9em;
   color: var(--ghonchu-amber-200);
-  opacity: 0.9;
 }
 
-/* ===============================
+/* =====================================================
    MESSAGES
-   =============================== */
+===================================================== */
+
 .ghonchu-messages {
   flex: 1;
   padding: 16px;
@@ -162,158 +133,31 @@
   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;
+  padding: 12px 16px;
+  color: white;
 }
 
 .msg-bot {
   background: var(--ghonchu-glass);
   border: 1px solid var(--ghonchu-glass-border);
-  color: white;
 }
 
 .msg-user {
+  align-self: flex-end;
   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;
@@ -331,89 +175,27 @@
   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.2",
+  "version": "1.0.3",
   "type": "module",
   "description": "A themeable chatbot widget for frontend integration.",
   "main": "dist/index.js",