Novel assistant (#178)

* Add basic novel assistant

* Refactor assistant

* Add logic for for items, scenes, maps, objective, indicators

* fix import type

* Fix amount of calls and the create_start specification

* improve assistant prompt

* fix description prompt

* add disclaimer, fix char description

* fix background and song search

apps/novel-builder/package.json

@@ -70,11 +70,13 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "multiformats": "^11.0.2",
+    "openai": "^4.77.0",
     "png-chunk-text": "^1.0.0",
     "png-chunks-extract": "^1.0.0",
     "prop-types": "^15.8.1",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
+    "react-chatbotify": "2.0.0-beta.26",
     "react-color": "^2.19.3",
     "react-country-flag": "^3.1.0",
     "react-icons": "^4.12.0",

apps/novel-builder/src/components/novel-assistant/DisclaimerModal.scss

@@ -0,0 +1,60 @@
+@import '../../styles/variables';
+
+.disclaimer-modal {
+  &__content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  &__section {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 12px;
+    border-radius: 8px;
+
+    &--premium {
+      background-color: rgba($color-gold, 0.1);
+      color: $color-gold;
+    }
+
+    &--warning {
+      background-color: rgba($color-red, 0.1);
+      color: $text-1;
+    }
+
+    &--info {
+      background-color: rgba($node-color, 0.1);
+      color: $text-1;
+    }
+  }
+
+  &__icon {
+    font-size: 20px;
+    margin-top: 4px;
+  }
+
+  &__text-container {
+    flex: 1;
+  }
+
+  &__title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 4px;
+    margin-top: 2px;
+  }
+
+  &__text {
+    line-height: 1.5;
+    font-size: 0.95rem;
+    opacity: 0.9;
+  }
+
+  &__button-container {
+    display: flex;
+    justify-content: center;
+  }
+}

apps/novel-builder/src/components/novel-assistant/DisclaimerModal.tsx

@@ -0,0 +1,68 @@
+import { Button, Modal } from '@mikugg/ui-kit';
+import { HiSparkles } from 'react-icons/hi';
+import { BiSolidError } from 'react-icons/bi';
+import { MdOutlineTimer, MdPhotoCamera } from 'react-icons/md';
+import './DisclaimerModal.scss';
+
+interface DisclaimerModalProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+export default function DisclaimerModal({ opened, onClose }: DisclaimerModalProps) {
+  return (
+    <Modal opened={opened} title="Assistant Disclaimer" shouldCloseOnOverlayClick={false} onCloseModal={onClose}>
+      <div className="disclaimer-modal__content">
+        <div className="disclaimer-modal__section disclaimer-modal__section--premium">
+          <HiSparkles className="disclaimer-modal__icon" />
+          <div className="disclaimer-modal__text-container">
+            <h3 className="disclaimer-modal__title">Premium Feature</h3>
+            <p className="disclaimer-modal__text">
+              This feature is exclusively available for premium members at the moment. Please keep in mind that the
+              assistant might NOT be available even for premium members in the future due to high costs.
+            </p>
+          </div>
+        </div>
+
+        <div className="disclaimer-modal__section disclaimer-modal__section--warning">
+          <BiSolidError className="disclaimer-modal__icon" />
+          <div className="disclaimer-modal__text-container">
+            <h3 className="disclaimer-modal__title">Experimental Feature - Save Your Work</h3>
+            <p className="disclaimer-modal__text">
+              The assistant is highly experimental and may produce unexpected results. Always save your work before
+              using it, as it might occasionally misunderstand context or provide suboptimal suggestions. While we
+              strive for reliability, it's important to backup your content to prevent any potential data loss.
+            </p>
+          </div>
+        </div>
+
+        <div className="disclaimer-modal__section disclaimer-modal__section--info">
+          <MdOutlineTimer className="disclaimer-modal__icon" />
+          <div className="disclaimer-modal__text-container">
+            <h3 className="disclaimer-modal__title">Usage Limits</h3>
+            <p className="disclaimer-modal__text">
+              Due to the significant computational costs involved, there are usage limits in place. Please use the
+              assistant thoughtfully and efficiently.
+            </p>
+          </div>
+        </div>
+
+        <div className="disclaimer-modal__section disclaimer-modal__section--info">
+          <MdPhotoCamera className="disclaimer-modal__icon" />
+          <div className="disclaimer-modal__text-container">
+            <h3 className="disclaimer-modal__title">Text Only</h3>
+            <p className="disclaimer-modal__text">
+              The assistant can help with text content only. It cannot generate, modify, or manipulate images.
+            </p>
+          </div>
+        </div>
+
+        <div className="disclaimer-modal__button-container">
+          <Button onClick={onClose} theme="primary">
+            I understand
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

apps/novel-builder/src/components/novel-assistant/NovelAssistant.scss

@@ -0,0 +1,32 @@
+@import '../../styles/variables';
+
+.AssistantActivityLog {
+  font-style: italic;
+  padding: 0.4rem 1rem;
+  font-size: 0.8rem;
+  background-color: rgba($background-1, 1);
+  width: 100%;
+  animation: fadeIn 0.5s ease-in-out;
+
+  &:first-child {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  &__verb {
+    color: $secondary-color;
+  }
+
+  &__button {
+    color: $text-1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}