Add nvde chatbot and styles

Signed-off-by: Jared Wilber <jwilber@nvidia.com>

Author: jwilber

docs/docs/assets/css/chatbot.css

@@ -1,211 +1,11 @@
-/* Chatbot Widget Styles */
-
-.chatbot-widget {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 1000;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  line-height: 1.4;
+/* match styles of llm_bot Chatbot icon */
+img.open-icon {
+  max-height: 20px !important;
+  max-width: 20px !important;
 }
 
-/* Toggle Button */
-.chatbot-toggle {
-  background-color: var(--md-primary-fg-color, #2196f3);
-  color: white;
+.open-icon {
   border: none;
-  border-radius: 50%;
-  width: 60px;
-  height: 60px;
-  cursor: pointer;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  transition: transform 0.2s, background-color 0.2s;
-}
-
-.chatbot-toggle:hover {
-  transform: scale(1.05);
-  background-color: var(--md-primary-fg-color--dark, #1976d2);
-}
-
-/* Container */
-.chatbot-container {
-  position: absolute;
-  bottom: 70px;
-  right: 0;
-  width: 350px;
-  height: 500px;
-  background-color: white;
-  border-radius: 12px;
-  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  max-width: calc(100vw - 40px);
-  max-height: calc(100vh - 100px);
-}
-
-/* Header */
-.chatbot-header {
-  background-color: var(--md-primary-fg-color, #2196f3);
-  color: white;
-  padding: 12px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 500;
-}
-
-.chatbot-header button {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 24px;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  line-height: 1;
-}
-
-/* Message Area */
-.chatbot-body {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-  background-color: #f5f7f9;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Messages */
-.chatbot-message {
-  margin-bottom: 12px;
-  max-width: 80%;
-  display: flex;
-}
-
-.chatbot-message.user {
-  align-self: flex-end;
-}
-
-.chatbot-message.bot {
-  align-self: flex-start;
-}
-
-.chatbot-message-content {
-  padding: 10px 14px;
-  border-radius: 18px;
-  display: inline-block;
-  word-break: break-word;
-}
-
-.chatbot-message.user .chatbot-message-content {
-  background-color: var(--md-primary-fg-color, #2196f3);
-  color: white;
-  border-bottom-right-radius: 4px;
-}
-
-.chatbot-message.bot .chatbot-message-content {
-  background-color: white;
-  color: #333;
-  border-bottom-left-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.chatbot-message.bot.error .chatbot-message-content {
-  background-color: #ffebee;
-  color: #d32f2f;
-}
-
-/* Input Area */
-.chatbot-input-container {
-  display: flex;
-  padding: 12px;
-  background-color: white;
-  border-top: 1px solid #e0e0e0;
-}
-
-#chatbot-input {
-  flex: 1;
-  border: 1px solid #e0e0e0;
-  border-radius: 20px;
-  padding: 8px 16px;
-  font-size: 14px;
-  color: black;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-#chatbot-input:focus {
-  border-color: var(--md-primary-fg-color, #2196f3);
-}
-
-#chatbot-send {
-  background-color: var(--md-primary-fg-color, #2196f3);
-  color: white;
-  border: none;
-  border-radius: 20px;
-  padding: 8px 16px;
-  margin-left: 8px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background-color 0.2s;
-}
-
-#chatbot-send:hover {
-  background-color: var(--md-primary-fg-color--dark, #1976d2);
-}
-
-/* Typing indicator */
-.typing-indicator {
-  display: flex;
-  align-items: center;
-}
-
-.typing-indicator span {
-  height: 7px;
-  width: 7px;
-  float: left;
-  margin: 0 1px;
-  background-color: #9e9ea1;
-  display: block;
-  border-radius: 50%;
-  opacity: 0.4;
-  animation: typing 1s infinite;
-}
-
-.typing-indicator span:nth-child(1) {
-  animation-delay: 0s;
-}
-
-.typing-indicator span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-indicator span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes typing {
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-5px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
-
-/* Responsive adjustments */
-@media (max-width: 480px) {
-  .chatbot-container {
-    width: calc(100vw - 40px);
-    height: 60vh;
-  }
+  max-width: 22px;
+  margin-right: 8px;
 }

docs/docs/assets/css/custom-material.css

@@ -121,7 +121,7 @@
 
 /* Images */
 .md-typeset img {
-  border: 1px solid var(--md-default-fg-color--lighter);
+  /* border: 1px solid var(--md-default-fg-color--lighter); */
   border-radius: 4px;
 }
 

docs/docs/assets/javascript/chatbot.js

@@ -9,4 +9,6 @@
 <link rel="stylesheet" href="{{ 'assets/css/chatbot.css' | url }}" />
 {% endblock %} {% block scripts %} {{ super() }}
 <script src="{{ 'assets/javascripts/chatbot.js' | url }}"></script>
+{% endblock %} {% block content %} {{ super() }}
+<div id="chatbot"></div>
 {% endblock %}