{children}
+
+ {isError && (addServerErrorClass(), (
+
+ );
+}
+
+const FooterWrapper: React.FC = () => {
+ return (
+
+ {shouldDisplayAppNavBar &&
+ )}
+
+ {isError ? (
+ children
+ ) : isLoading ? (
+
+
+
+
+ );
+};
diff --git a/app/src/client/Main.css b/app/src/client/Main.css
new file mode 100644
index 000000000..03c26e555
--- /dev/null
+++ b/app/src/client/Main.css
@@ -0,0 +1,448 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+ font-family: "Panton-SemiBold";
+ src: url("/fonts/Panton-SemiBold.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Rubik-Medium";
+ src: url("/fonts/Rubik-Medium.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "RobotoMono-Regular";
+ src: url("/fonts/RobotoMono-Regular.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "Roboto-Light";
+ src: url("/fonts/Roboto-Light.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "Roboto-Regular";
+ src: url("/fonts/Roboto-Regular.ttf") format("truetype");
+}
+
+body {
+ margin: 0;
+ /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif; */
+ font-family:"Roboto-Regular";
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ monospace;
+}
+
+
+.toc-marketing-checkbox-wrapper .checkbox-container {
+ padding-left: 22px;
+ display: block;
+ position: relative;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+/* Hide the browser's default checkbox */
+.toc-marketing-checkbox-wrapper input {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+}
+/* Create a custom checkbox */
+.toc-marketing-checkbox-wrapper .checkmark {
+ position: absolute;
+ top: 2px;
+ left: 0;
+ height: 13px;
+ width: 13px;
+ background-color: #eae4d9;
+}
+
+.toc-marketing-checkbox-wrapper.light .checkmark {
+ background-color: #fff;
+}
+
+/* On mouse-over, add a grey background color */
+.toc-marketing-checkbox-wrapper .checkbox-container:hover input ~ .checkmark {
+ background-color: #eae4d9;
+}
+.toc-marketing-checkbox-wrapper.light .checkbox-container:hover input ~ .checkmark {
+ background-color: #fff;
+}
+
+
+/* When the checkbox is checked, add a blue background */
+.toc-marketing-checkbox-wrapper .checkbox-container input:checked ~ .checkmark {
+ background-color: #6faabc;
+}
+.toc-marketing-checkbox-wrapper.light .checkbox-container input:checked ~ .checkmark {
+ background-color: #fff;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.toc-marketing-checkbox-wrapper .checkmark:after {
+ content: "";
+ position: absolute;
+ display: none;
+}
+
+/* Show the checkmark when checked */
+.toc-marketing-checkbox-wrapper .checkbox-container input:checked ~ .checkmark:after {
+ display: block;
+}
+
+/* Style the checkmark/indicator */
+.toc-marketing-checkbox-wrapper .checkbox-container .checkmark:after {
+ left: 4px;
+ top: 0px;
+ width: 6px;
+ height: 11px;
+ border: solid #eae4d9;
+ border-width: 0 3px 3px 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+.toc-marketing-checkbox-wrapper.light .checkbox-container .checkmark:after {
+ border: solid #6faabc;
+ border-width: 0 3px 3px 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.toc-marketing-container{
+ -webkit-transition: max-height 0.5s;
+ -moz-transition: max-height 0.5s;
+ -ms-transition: max-height 0.5s;
+ -o-transition: max-height 0.5s;
+ transition: max-height 0.5s;
+ overflow: hidden;
+}
+
+.accordion-wrapper {
+ border-radius: 5px;
+ margin-bottom: 0px;
+ margin-top: -7px;
+}
+
+.accordion-title {
+ padding: 10px 15px;
+ cursor: pointer;
+}
+
+/* .accordion-title.open {
+ background: #ddd;
+} */
+
+.accordion-item {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease-in-out;
+}
+
+.accordion-item.collapsed {
+ max-height: 100vh;
+}
+
+.accordion-content {
+ padding: 10px 15px;
+ /* background: #fff;
+ border-bottom: 1px solid #ddd; */
+}
+
+/* Google login button */
+.gsi-material-button {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ -webkit-appearance: none;
+ background-color: WHITE;
+ background-image: none;
+ border: 1px solid #747775;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ color: #1f1f1f;
+ cursor: pointer;
+ font-family: 'Roboto', arial, sans-serif;
+ font-size: 14px;
+ height: 40px;
+ letter-spacing: 0.25px;
+ outline: none;
+ overflow: hidden;
+ padding: 0 12px;
+ position: relative;
+ text-align: center;
+ -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
+ transition: background-color .218s, border-color .218s, box-shadow .218s;
+ vertical-align: middle;
+ white-space: nowrap;
+ width: auto;
+ max-width: 400px;
+ min-width: min-content;
+}
+
+.gsi-material-button .gsi-material-button-icon {
+ height: 20px;
+ margin-right: 12px;
+ min-width: 20px;
+ width: 20px;
+}
+
+.gsi-material-button .gsi-material-button-content-wrapper {
+ -webkit-align-items: center;
+ align-items: center;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ height: 100%;
+ justify-content: center;
+ position: relative;
+ width: 100%;
+}
+
+.gsi-material-button .gsi-material-button-contents {
+ -webkit-flex-grow: 0;
+ flex-grow: 0;
+ font-family: 'Roboto', arial, sans-serif;
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.gsi-material-button .gsi-material-button-state {
+ -webkit-transition: opacity .218s;
+ transition: opacity .218s;
+ bottom: 0;
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.gsi-material-button:disabled {
+ cursor: default;
+ background-color: #ffffff61;
+ border-color: #1f1f1f1f;
+}
+
+.gsi-material-button:disabled .gsi-material-button-contents {
+ opacity: 38%;
+}
+
+.gsi-material-button:disabled .gsi-material-button-icon {
+ opacity: 38%;
+}
+
+.gsi-material-button:not(:disabled):active .gsi-material-button-state,
+.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+ background-color: #303030;
+ opacity: 12%;
+}
+
+.gsi-material-button:not(:disabled):hover {
+ -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+ box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
+}
+
+.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+ background-color: #303030;
+ opacity: 8%;
+}
+/* Google login button */
+
+.social-icons-wrapper .discord-link:before {
+ background-color: #8c9fae;
+ content: "";
+ display: flex;
+ height: 24px;
+ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJHcmFwaGljX0VsZW1lbnRzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxMzUgMTM1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzUgMTM1IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MHtmaWxsOiNmZmZ9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjcuNSAwQzMwLjIgMCAwIDMwLjIgMCA2Ny41UzMwLjIgMTM1IDY3LjUgMTM1IDEzNSAxMDQuOCAxMzUgNjcuNSAxMDQuOCAwIDY3LjUgMHptNDMuNCA4OS43Yy02LjYgNS0xNC4xIDguNy0yMiAxMS4xLTEuOC0yLjQtMy40LTUtNC43LTcuNiAyLjYtMSA1LjEtMi4yIDcuNC0zLjYtLjYtLjUtMS4yLS45LTEuOC0xLjQtMTQgNi42LTMwLjEgNi42LTQ0LjEgMC0uNi41LTEuMi45LTEuOCAxLjQgMi40IDEuNCA0LjkgMi42IDcuNCAzLjUtMS40IDIuNy0yLjkgNS4yLTQuNyA3LjctNy45LTIuNC0xNS40LTYuMi0yMi0xMS4xQzIzIDczLjUgMjYuMSA1NyAzNy40IDQwLjFjNS43LTIuNiAxMS44LTQuNSAxOC01LjYuOSAxLjUgMS43IDMuMSAyLjQgNC43IDYuNi0xIDEzLjMtMSAxOS45IDAgLjYtMS41IDEuNS0zLjMgMi4zLTQuNyA2LjIgMS4xIDEyLjIgMi45IDE4IDUuNSA5LjggMTQuNiAxNC43IDMwLjkgMTIuOSA0OS43eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01My4yIDYyLjJjLTQuNCAwLTcuOCA0LTcuOCA4LjhzMy41IDguOCA3LjggOC44YzQuNCAwIDcuOC00IDcuOC04LjguMS00LjktMy40LTguOC03LjgtOC44ek04Mi4xIDYyLjJjLTQuNCAwLTcuOCA0LTcuOCA4LjhzMy41IDguOCA3LjggOC44YzQuNCAwIDcuOC00IDcuOC04LjguMS00LjktMy40LTguOC03LjgtOC44eiIvPjwvc3ZnPg==);
+ mask-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJHcmFwaGljX0VsZW1lbnRzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxMzUgMTM1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzUgMTM1IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MHtmaWxsOiNmZmZ9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjcuNSAwQzMwLjIgMCAwIDMwLjIgMCA2Ny41UzMwLjIgMTM1IDY3LjUgMTM1IDEzNSAxMDQuOCAxMzUgNjcuNSAxMDQuOCAwIDY3LjUgMHptNDMuNCA4OS43Yy02LjYgNS0xNC4xIDguNy0yMiAxMS4xLTEuOC0yLjQtMy40LTUtNC43LTcuNiAyLjYtMSA1LjEtMi4yIDcuNC0zLjYtLjYtLjUtMS4yLS45LTEuOC0xLjQtMTQgNi42LTMwLjEgNi42LTQ0LjEgMC0uNi41LTEuMi45LTEuOCAxLjQgMi40IDEuNCA0LjkgMi42IDcuNCAzLjUtMS40IDIuNy0yLjkgNS4yLTQuNyA3LjctNy45LTIuNC0xNS40LTYuMi0yMi0xMS4xQzIzIDczLjUgMjYuMSA1NyAzNy40IDQwLjFjNS43LTIuNiAxMS44LTQuNSAxOC01LjYuOSAxLjUgMS43IDMuMSAyLjQgNC43IDYuNi0xIDEzLjMtMSAxOS45IDAgLjYtMS41IDEuNS0zLjMgMi4zLTQuNyA2LjIgMS4xIDEyLjIgMi45IDE4IDUuNSA5LjggMTQuNiAxNC43IDMwLjkgMTIuOSA0OS43eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01My4yIDYyLjJjLTQuNCAwLTcuOCA0LTcuOCA4LjhzMy41IDguOCA3LjggOC44YzQuNCAwIDcuOC00IDcuOC04LjguMS00LjktMy40LTguOC03LjgtOC44ek04Mi4xIDYyLjJjLTQuNCAwLTcuOCA0LTcuOCA4LjhzMy41IDguOCA3LjggOC44YzQuNCAwIDcuOC00IDcuOC04LjguMS00LjktMy40LTguOC03LjgtOC44eiIvPjwvc3ZnPg==);
+ width: 24px;
+}
+
+.social-icons-wrapper .github-link:before {
+ background-color: #8c9fae;
+ content: "";
+ display: flex;
+ height: 24px;
+ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzUgMTMzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzUgMTMzIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNMTM1IDY3LjVDMTM1IDMwLjIgMTA0LjggMCA2Ny41IDBTMCAzMC4yIDAgNjcuNWMwIDMxLjYgMjEuNyA1OC4xIDUxIDY1LjUgMC0uMi4xLS40LjEtLjYgMC0xLjUtLjEtNi44LS4xLTEyLjMtMTguNCA0LTIyLjItNy45LTIyLjItNy45LTMtNy43LTcuMy05LjctNy4zLTkuNy02LTQuMS40LTQuMS40LTQuMSA2LjcuNCAxMC4yIDYuOCAxMC4yIDYuOCA1LjkgMTAuMSAxNS40IDcuMyAxOS4yIDUuNS41LTQuMyAyLjMtNy4zIDQuMi04LjktMTQuNi0xLjUtMzAtNy4zLTMwLTMyLjggMC03LjMgMi42LTEzLjIgNi44LTE3LjgtLjctMS43LTMtOC41LjctMTcuNiAwIDAgNS42LTEuOCAxOC4xIDYuOCA1LjQtMS41IDEwLjktMi4yIDE2LjUtMi4yczExLjMuOCAxNi41IDIuMmMxMi42LTguNiAxOC4xLTYuOCAxOC4xLTYuOCAzLjYgOS4xIDEuMyAxNiAuNyAxNy42IDQuMyA0LjYgNi44IDEwLjYgNi44IDE3LjggMCAyNS41LTE1LjQgMzEuMS0zMC4yIDMyLjggMi40IDIuMSA0LjUgNi4xIDQuNSAxMi4zIDAgOC45LS4xIDE2LjEtLjEgMTguMyAwIC4yIDAgLjQuMS43IDI5LjItNy40IDUxLTMzLjkgNTEtNjUuNnoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiNmZmYiLz48L3N2Zz4=);
+ mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzUgMTMzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzUgMTMzIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNMTM1IDY3LjVDMTM1IDMwLjIgMTA0LjggMCA2Ny41IDBTMCAzMC4yIDAgNjcuNWMwIDMxLjYgMjEuNyA1OC4xIDUxIDY1LjUgMC0uMi4xLS40LjEtLjYgMC0xLjUtLjEtNi44LS4xLTEyLjMtMTguNCA0LTIyLjItNy45LTIyLjItNy45LTMtNy43LTcuMy05LjctNy4zLTkuNy02LTQuMS40LTQuMS40LTQuMSA2LjcuNCAxMC4yIDYuOCAxMC4yIDYuOCA1LjkgMTAuMSAxNS40IDcuMyAxOS4yIDUuNS41LTQuMyAyLjMtNy4zIDQuMi04LjktMTQuNi0xLjUtMzAtNy4zLTMwLTMyLjggMC03LjMgMi42LTEzLjIgNi44LTE3LjgtLjctMS43LTMtOC41LjctMTcuNiAwIDAgNS42LTEuOCAxOC4xIDYuOCA1LjQtMS41IDEwLjktMi4yIDE2LjUtMi4yczExLjMuOCAxNi41IDIuMmMxMi42LTguNiAxOC4xLTYuOCAxOC4xLTYuOCAzLjYgOS4xIDEuMyAxNiAuNyAxNy42IDQuMyA0LjYgNi44IDEwLjYgNi44IDE3LjggMCAyNS41LTE1LjQgMzEuMS0zMC4yIDMyLjggMi40IDIuMSA0LjUgNi4xIDQuNSAxMi4zIDAgOC45LS4xIDE2LjEtLjEgMTguMyAwIC4yIDAgLjQuMS43IDI5LjItNy40IDUxLTMzLjkgNTEtNjUuNnoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiNmZmYiLz48L3N2Zz4=);
+ width: 24px;
+}
+
+.social-icons-wrapper .discord-link:hover, .social-icons-wrapper .github-link:hover {
+ opacity: 0.6;
+}
+
+@layer utilities {
+ /* Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+
+ .chat-height {
+ @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
+ }
+ .inbox-height {
+ @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
+ }
+}
+
+
+
+/* third-party libraries CSS */
+
+.tableCheckbox:checked ~ div span {
+ @apply opacity-100;
+}
+.tableCheckbox:checked ~ div {
+ @apply bg-primary border-primary;
+}
+
+.apexcharts-legend-text {
+ @apply !text-body dark:!text-bodydark;
+}
+.apexcharts-text {
+ @apply !fill-body dark:!fill-bodydark;
+}
+.apexcharts-xcrosshairs {
+ @apply !fill-stroke dark:!fill-strokedark;
+}
+.apexcharts-gridline {
+ @apply !stroke-stroke dark:!stroke-strokedark;
+}
+.apexcharts-series.apexcharts-pie-series path {
+ @apply dark:!stroke-transparent;
+}
+.apexcharts-legend-series {
+ @apply !inline-flex gap-1.5;
+}
+.apexcharts-tooltip.apexcharts-theme-light {
+ @apply dark:!bg-boxdark dark:!border-strokedark;
+}
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+ @apply dark:!bg-meta-4 dark:!border-strokedark;
+}
+.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
+ @apply dark:!bg-meta-4 dark:!border-meta-4 dark:!text-bodydark1;
+}
+.apexcharts-xaxistooltip-bottom:after {
+ @apply dark:!border-b-meta-4;
+}
+.apexcharts-xaxistooltip-bottom:before {
+ @apply dark:!border-b-meta-4;
+
+}
+
+.flatpickr-day.selected {
+ @apply bg-primary border-primary hover:bg-primary hover:border-primary;
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+ @apply fill-primary;
+}
+.flatpickr-calendar.arrowTop:before {
+ @apply dark:!border-b-boxdark;
+}
+.flatpickr-calendar.arrowTop:after {
+ @apply dark:!border-b-boxdark;
+}
+.flatpickr-calendar {
+ @apply dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 !p-6 2xsm:!w-auto;
+}
+.flatpickr-day {
+ @apply dark:!text-bodydark;
+}
+.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
+ @apply !top-7 dark:!text-white dark:!fill-white;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+ @apply !left-7
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+ @apply !right-7
+}
+span.flatpickr-weekday,
+.flatpickr-months .flatpickr-month {
+ @apply dark:!text-white dark:!fill-white;
+}
+.flatpickr-day.inRange {
+ @apply dark:!bg-meta-4 dark:!border-meta-4 dark:!shadow-7;
+}
+.flatpickr-day.selected, .flatpickr-day.startRange,
+.flatpickr-day.selected, .flatpickr-day.endRange {
+ @apply dark:!text-white;
+}
+
+.map-btn .jvm-zoom-btn {
+ @apply flex items-center justify-center w-7.5 h-7.5 rounded border border-stroke dark:border-strokedark hover:border-primary dark:hover:border-primary bg-white hover:bg-primary text-body hover:text-white dark:text-bodydark dark:hover:text-white text-2xl leading-none px-0 pt-0 pb-0.5;
+}
+.mapOne .jvm-zoom-btn {
+ @apply left-auto top-auto bottom-0;
+}
+.mapOne .jvm-zoom-btn.jvm-zoomin {
+ @apply right-10;
+}
+.mapOne .jvm-zoom-btn.jvm-zoomout {
+ @apply right-0;
+}
+.mapTwo .jvm-zoom-btn {
+ @apply top-auto bottom-0;
+}
+.mapTwo .jvm-zoom-btn.jvm-zoomin {
+ @apply left-0;
+}
+.mapTwo .jvm-zoom-btn.jvm-zoomout {
+ @apply left-10;
+}
+
+.taskCheckbox:checked ~ .box span {
+ @apply opacity-100;
+}
+.taskCheckbox:checked ~ p {
+ @apply line-through;
+}
+.taskCheckbox:checked ~ .box {
+ @apply bg-primary border-primary dark:border-primary;
+}
+
+.custom-input-date::-webkit-calendar-picker-indicator {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 20px;
+}
+.custom-input-date-1::-webkit-calendar-picker-indicator {
+ background-image: url(./images/icon/icon-calendar.svg);
+}
+.custom-input-date-2::-webkit-calendar-picker-indicator {
+ background-image: url(./images/icon/icon-arrow-down.svg);
+}
+
+[x-cloak] {
+ display: none !important;
+}
diff --git a/app/src/client/admin/common/Loader/index.tsx b/app/src/client/admin/common/Loader/index.tsx
new file mode 100644
index 000000000..4221fda7f
--- /dev/null
+++ b/app/src/client/admin/common/Loader/index.tsx
@@ -0,0 +1,9 @@
+const Loader = () => {
+ return (
+
+
+ + Š 2024{' '} + + airt + + . All rights reserved. +
+
+
+
+ );
+};
+
+export default Loader;
diff --git a/app/src/client/admin/common/types.ts b/app/src/client/admin/common/types.ts
new file mode 100644
index 000000000..0df997314
--- /dev/null
+++ b/app/src/client/admin/common/types.ts
@@ -0,0 +1,3 @@
+import { type DailyStats } from 'wasp/entities';
+
+export type DailyStatsProps = { dailyStats?: DailyStats; weeklyStats?: DailyStats[]; isLoading?: boolean };
diff --git a/app/src/client/admin/components/BarChart.tsx b/app/src/client/admin/components/BarChart.tsx
new file mode 100644
index 000000000..2ab5f7624
--- /dev/null
+++ b/app/src/client/admin/components/BarChart.tsx
@@ -0,0 +1,146 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+interface BarChartState {
+ series: { data: number[] }[];
+}
+
+const BarChart: React.FC = () => {
+ const [state, setState] = useState
+
+ );
+};
+
+export default BarChart;
diff --git a/app/src/client/admin/components/Breadcrumb.tsx b/app/src/client/admin/components/Breadcrumb.tsx
new file mode 100644
index 000000000..3e3a6131a
--- /dev/null
+++ b/app/src/client/admin/components/Breadcrumb.tsx
@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+interface BreadcrumbProps {
+ pageName: string;
+}
+const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
+ return (
+
+
+
+ + Visitors Analytics +
+
+
+
+
+
+
+ );
+};
+
+export default Breadcrumb;
diff --git a/app/src/client/admin/components/CheckboxOne.tsx b/app/src/client/admin/components/CheckboxOne.tsx
new file mode 100644
index 000000000..7adcd6976
--- /dev/null
+++ b/app/src/client/admin/components/CheckboxOne.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { cn } from '../../../shared/utils';
+
+const CheckboxOne = () => {
+ const [isChecked, setIsChecked] = useState+ {pageName} +
+ + +
+
+
+ );
+};
+
+export default CheckboxOne;
diff --git a/app/src/client/admin/components/CheckboxTwo.tsx b/app/src/client/admin/components/CheckboxTwo.tsx
new file mode 100644
index 000000000..11b9160c3
--- /dev/null
+++ b/app/src/client/admin/components/CheckboxTwo.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { cn } from '../../../shared/utils';
+
+const CheckboxTwo = () => {
+ const [enabled, setEnabled] = useState
+
+
+ );
+};
+
+export default CheckboxTwo;
diff --git a/app/src/client/admin/components/DarkModeSwitcher.tsx b/app/src/client/admin/components/DarkModeSwitcher.tsx
new file mode 100644
index 000000000..62cc6bdb6
--- /dev/null
+++ b/app/src/client/admin/components/DarkModeSwitcher.tsx
@@ -0,0 +1,58 @@
+import { cn } from '../../../shared/utils';
+import useColorMode from '../../hooks/useColorMode';
+
+const DarkModeSwitcher = () => {
+ const [colorMode, setColorMode] = useColorMode();
+
+ return (
+
+
+
+ );
+};
+
+export default DarkModeSwitcher;
diff --git a/app/src/client/admin/components/DataStats.tsx b/app/src/client/admin/components/DataStats.tsx
new file mode 100644
index 000000000..73910ad68
--- /dev/null
+++ b/app/src/client/admin/components/DataStats.tsx
@@ -0,0 +1,102 @@
+const DataStats = () => {
+ return (
+
+
+ );
+};
+
+export default DataStats;
diff --git a/app/src/client/admin/components/DropdownEditDelete.tsx b/app/src/client/admin/components/DropdownEditDelete.tsx
new file mode 100644
index 000000000..cd2f9e416
--- /dev/null
+++ b/app/src/client/admin/components/DropdownEditDelete.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../../shared/utils';
+
+const DropdownDefault = () => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const trigger = useRef
+
+
+
+
+
+ + $4,350 +
+Unique Visitors
+
+
+ 18%
+
+
+
+
+
+ + 55.9K +
+Total Pageviews
+
+
+ 25%
+
+
+
+
+
+ + 54% +
+Bounce Rate
+
+
+ 7%
+
+
+
+
+
+ + 2m 56s +
+Visit Duration
+
+
+ 12%
+
+
+
+
+ );
+};
+
+export default DropdownDefault;
diff --git a/app/src/client/admin/components/Header.tsx b/app/src/client/admin/components/Header.tsx
new file mode 100644
index 000000000..088fa44b9
--- /dev/null
+++ b/app/src/client/admin/components/Header.tsx
@@ -0,0 +1,96 @@
+import DarkModeSwitcher from './DarkModeSwitcher';
+import MessageButton from './MessageButton';
+import DropdownUser from '../../components/DropdownUser';
+import { cn } from '../../../shared/utils';
+
+const Header = (props: {
+ sidebarOpen: string | boolean | undefined;
+ setSidebarOpen: (arg0: boolean) => void;
+ user?: any;
+}) => {
+ return (
+ setDropdownOpen(true)}
+ onBlur={() => setDropdownOpen(false)}
+ className={cn(
+ 'absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark',
+ {
+ block: dropdownOpen,
+ hidden: !dropdownOpen,
+ }
+ )}
+ >
+
+
+
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+ -
+ {/* */}
+ {/*
+ {/* */}
+ {!!props.user &&
+
+
+ );
+};
+
+export default PieChart;
diff --git a/app/src/client/admin/components/RevenueAndProfitChart.tsx b/app/src/client/admin/components/RevenueAndProfitChart.tsx
new file mode 100644
index 000000000..98bd8f908
--- /dev/null
+++ b/app/src/client/admin/components/RevenueAndProfitChart.tsx
@@ -0,0 +1,242 @@
+import { ApexOptions } from 'apexcharts';
+import { useEffect, useMemo, useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+import { DailyStatsProps } from '../common/types';
+
+const options: ApexOptions = {
+ legend: {
+ show: false,
+ position: 'top',
+ horizontalAlign: 'left',
+ },
+ colors: ['#3C50E0', '#80CAEE'],
+ chart: {
+ fontFamily: 'Rubik-Medium, sans-serif',
+ height: 335,
+ type: 'area',
+ dropShadow: {
+ enabled: true,
+ color: '#623CEA14',
+ top: 10,
+ blur: 4,
+ left: 0,
+ opacity: 0.1,
+ },
+
+ toolbar: {
+ show: false,
+ },
+ },
+ responsive: [
+ {
+ breakpoint: 1024,
+ options: {
+ chart: {
+ height: 300,
+ },
+ },
+ },
+ {
+ breakpoint: 1366,
+ options: {
+ chart: {
+ height: 350,
+ },
+ },
+ },
+ ],
+ stroke: {
+ width: [2, 2],
+ curve: 'straight',
+ },
+ // labels: {
+ // show: false,
+ // position: "top",
+ // },
+ grid: {
+ xaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ markers: {
+ size: 4,
+ colors: '#fff',
+ strokeColors: ['#3056D3', '#80CAEE'],
+ strokeWidth: 3,
+ strokeOpacity: 0.9,
+ strokeDashArray: 0,
+ fillOpacity: 1,
+ discrete: [],
+ hover: {
+ size: undefined,
+ sizeOffset: 5,
+ },
+ },
+ xaxis: {
+ type: 'category',
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ },
+ yaxis: {
+ title: {
+ style: {
+ fontSize: '0px',
+ },
+ },
+ min: 0,
+ max: 100,
+ },
+};
+
+interface ChartOneState {
+ series: {
+ name: string;
+ data: number[];
+ }[];
+}
+
+const RevenueAndProfitChart = ({ weeklyStats, isLoading }: DailyStatsProps) => {
+ const dailyRevenueArray = useMemo(() => {
+ if (!!weeklyStats && weeklyStats?.length > 0) {
+ const sortedWeeks = weeklyStats?.sort((a, b) => {
+ return new Date(a.date).getTime() - new Date(b.date).getTime();
+ });
+ return sortedWeeks.map((stat) => stat.totalRevenue);
+ }
+ }, [weeklyStats]);
+
+ const daysOfWeekArr = useMemo(() => {
+ if (!!weeklyStats && weeklyStats?.length > 0) {
+ const datesArr = weeklyStats?.map((stat) => {
+ // get day of week, month, and day of month
+ const dateArr = stat.date.toString().split(' ');
+ return dateArr.slice(0, 3).join(' ');
+ });
+ return datesArr;
+ }
+ }, [weeklyStats]);
+
+ const [state, setState] = useState
+
+
+
+
+ + Visitors Analytics +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Desktop + 65% +
+
+
+
+
+
+ + Tablet + 34% +
+
+
+
+
+
+ + Mobile + 45% +
+
+
+
+
+
+ + Unknown + 12% +
+
+
+ );
+};
+
+export default RevenueAndProfitChart;
diff --git a/app/src/client/admin/components/Sidebar.tsx b/app/src/client/admin/components/Sidebar.tsx
new file mode 100644
index 000000000..5bd58b5df
--- /dev/null
+++ b/app/src/client/admin/components/Sidebar.tsx
@@ -0,0 +1,527 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import Logo from '../../static/logo.svg';
+import SidebarLinkGroup from './SidebarLinkGroup';
+import { cn } from '../../../shared/utils';
+
+interface SidebarProps {
+ sidebarOpen: boolean;
+ setSidebarOpen: (arg: boolean) => void;
+}
+
+const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
+ const location = useLocation();
+ const { pathname } = location;
+
+ const trigger = useRef
+
+
+
+
+
+
+
+
+
+
+
+ Total Profit
+Last 7 Days
+
+
+
+
+
+
+
+ Total Revenue
+Last 7 Days
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SourcesTable;
diff --git a/app/src/client/admin/components/SwitcherOne.tsx b/app/src/client/admin/components/SwitcherOne.tsx
new file mode 100644
index 000000000..33a2e9471
--- /dev/null
+++ b/app/src/client/admin/components/SwitcherOne.tsx
@@ -0,0 +1,33 @@
+import { type User } from 'wasp/entities';
+import { useState } from 'react';
+import { cn } from '../../../shared/utils';
+
+const SwitcherOne = ({ user, updateUserById }: { user?: PartialTop Sources
+ +
+
+
+
+
+ {sources && sources.length > 0 ? (
+ sources.map((source) => (
+
+
+ Source
+
+
+ Visitors
+
+
+ Sales
+
+
+ ))
+ ) : (
+
+
+
+ {source.name}
+
+
+
+ {source.visitors}
+
+
+ --
+
+
+ )}
+ No data to display
+
+
+
+ );
+};
+
+export default SwitcherOne;
diff --git a/app/src/client/admin/components/SwitcherTwo.tsx b/app/src/client/admin/components/SwitcherTwo.tsx
new file mode 100644
index 000000000..780a726ca
--- /dev/null
+++ b/app/src/client/admin/components/SwitcherTwo.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { cn } from '../../../shared/utils';
+
+const SwitcherTwo = () => {
+ const [enabled, setEnabled] = useState(false);
+
+ return (
+
+
+
+ );
+};
+
+export default SwitcherTwo;
diff --git a/app/src/client/admin/components/TotalPaidViewsCard.tsx b/app/src/client/admin/components/TotalPaidViewsCard.tsx
new file mode 100644
index 000000000..f729c5535
--- /dev/null
+++ b/app/src/client/admin/components/TotalPaidViewsCard.tsx
@@ -0,0 +1,55 @@
+import { cn } from '../../../shared/utils';
+import { UpArrow, DownArrow } from '../images/icon/icons-arrows';
+
+type PageViewsStats = {
+ totalPageViews: number | undefined;
+ prevDayViewsChangePercent: string | undefined;
+};
+
+const TotalPageViewsCard = ({ totalPageViews, prevDayViewsChangePercent }: PageViewsStats) => {
+ const isDeltaPositive = parseInt(prevDayViewsChangePercent || '') > 0;
+
+ return (
+
+
+ );
+};
+
+export default TotalPageViewsCard;
diff --git a/app/src/client/admin/components/TotalPayingUsersCard.tsx b/app/src/client/admin/components/TotalPayingUsersCard.tsx
new file mode 100644
index 000000000..03ffb9d78
--- /dev/null
+++ b/app/src/client/admin/components/TotalPayingUsersCard.tsx
@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import { UpArrow, DownArrow } from '../images/icon/icons-arrows';
+import type { DailyStatsProps } from '../common/types';
+import { cn } from '../../../shared/utils';
+
+const TotalPayingUsersCard = ({ dailyStats, isLoading }: DailyStatsProps) => {
+ const isDeltaPositive = useMemo(() => {
+ return !!dailyStats?.paidUserDelta && dailyStats?.paidUserDelta > 0;
+ }, [dailyStats]);
+
+ return (
+
+
+
+
+
+
+
+
+
+ {prevDayViewsChangePercent && parseInt(prevDayViewsChangePercent) !== 0 && (
+
+ {prevDayViewsChangePercent}%{parseInt(prevDayViewsChangePercent) > 0 ? {totalPageViews}
+ Total page views +
+
+ );
+};
+
+export default TotalPayingUsersCard;
diff --git a/app/src/client/admin/components/TotalRevenueCard.tsx b/app/src/client/admin/components/TotalRevenueCard.tsx
new file mode 100644
index 000000000..af31b9aca
--- /dev/null
+++ b/app/src/client/admin/components/TotalRevenueCard.tsx
@@ -0,0 +1,62 @@
+import { useMemo, useEffect } from 'react';
+import { UpArrow, DownArrow } from '../images/icon/icons-arrows';
+import type { DailyStatsProps } from '../common/types';
+
+const TotalRevenueCard = ({dailyStats, weeklyStats, isLoading}: DailyStatsProps) => {
+ const isDeltaPositive = useMemo(() => {
+ if (!weeklyStats) return false;
+ return (weeklyStats[0].totalRevenue - weeklyStats[1]?.totalRevenue) > 0;
+ }, [weeklyStats]);
+
+ const deltaPercentage = useMemo(() => {
+ if ( !weeklyStats || weeklyStats.length < 2 || isLoading) return;
+ if ( weeklyStats[1]?.totalRevenue === 0 || weeklyStats[0]?.totalRevenue === 0 ) return 0;
+
+ weeklyStats.sort((a, b) => b.id - a.id);
+
+ const percentage = ((weeklyStats[0].totalRevenue - weeklyStats[1]?.totalRevenue) / weeklyStats[1]?.totalRevenue) * 100;
+ return Math.floor(percentage);
+ }, [weeklyStats]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {isLoading ? '...' : dailyStats?.paidUserDelta !== 0 ? dailyStats?.paidUserDelta : '-'}
+ {dailyStats?.paidUserDelta !== 0 ? isDeltaPositive ? {dailyStats?.paidUserCount}
+ Total Paying Users +
+
+ );
+};
+
+export default TotalRevenueCard;
diff --git a/app/src/client/admin/components/TotalSignupsCard.tsx b/app/src/client/admin/components/TotalSignupsCard.tsx
new file mode 100644
index 000000000..cd7c25391
--- /dev/null
+++ b/app/src/client/admin/components/TotalSignupsCard.tsx
@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { UpArrow } from '../images/icon/icons-arrows';
+import type { DailyStatsProps } from '../common/types';
+import { cn } from '../../../shared/utils';
+
+const TotalSignupsCard = ({ dailyStats, isLoading }: DailyStatsProps) => {
+ const isDeltaPositive = useMemo(() => {
+ return !!dailyStats?.userDelta && dailyStats.userDelta > 0;
+ }, [dailyStats]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {isLoading ? '...' : !!deltaPercentage ? deltaPercentage + '%' : '-'}
+ {!!deltaPercentage ? isDeltaPositive ? ${dailyStats?.totalRevenue}
+ Total Revenue +
+
+ );
+};
+
+export default TotalSignupsCard;
diff --git a/app/src/client/admin/components/UsersTable.tsx b/app/src/client/admin/components/UsersTable.tsx
new file mode 100644
index 000000000..54b3ff0f1
--- /dev/null
+++ b/app/src/client/admin/components/UsersTable.tsx
@@ -0,0 +1,234 @@
+import { updateUserById, useQuery, getPaginatedUsers } from 'wasp/client/operations';
+import { useState, useEffect } from 'react';
+import SwitcherOne from './SwitcherOne';
+import Loader from '../common/Loader';
+import DropdownEditDelete from './DropdownEditDelete';
+
+type StatusOptions = 'past_due' | 'canceled' | 'active' | 'deleted';
+
+const UsersTable = () => {
+ const [skip, setskip] = useState(0);
+ const [page, setPage] = useState(1);
+ const [email, setEmail] = useState
+
+
+
+
+
+
+
+
+
+ {isLoading ? '...' : isDeltaPositive ? dailyStats?.userDelta : '-'}
+ {!!dailyStats && isDeltaPositive && {dailyStats?.userCount}
+ Total Signups +
+
+ );
+};
+
+export default UsersTable;
diff --git a/app/src/client/admin/images/icon/icon-arrow-down.svg b/app/src/client/admin/images/icon/icon-arrow-down.svg
new file mode 100644
index 000000000..b25ef986f
--- /dev/null
+++ b/app/src/client/admin/images/icon/icon-arrow-down.svg
@@ -0,0 +1,6 @@
+
diff --git a/app/src/client/admin/images/icon/icon-calendar.svg b/app/src/client/admin/images/icon/icon-calendar.svg
new file mode 100644
index 000000000..3360ff12f
--- /dev/null
+++ b/app/src/client/admin/images/icon/icon-calendar.svg
@@ -0,0 +1,6 @@
+
diff --git a/app/src/client/admin/images/icon/icon-copy-alt.svg b/app/src/client/admin/images/icon/icon-copy-alt.svg
new file mode 100644
index 000000000..1f0c77026
--- /dev/null
+++ b/app/src/client/admin/images/icon/icon-copy-alt.svg
@@ -0,0 +1,6 @@
+
diff --git a/app/src/client/admin/images/icon/icon-moon.svg b/app/src/client/admin/images/icon/icon-moon.svg
new file mode 100644
index 000000000..1ca395d0a
--- /dev/null
+++ b/app/src/client/admin/images/icon/icon-moon.svg
@@ -0,0 +1,10 @@
+
diff --git a/app/src/client/admin/images/icon/icon-sun.svg b/app/src/client/admin/images/icon/icon-sun.svg
new file mode 100644
index 000000000..4524cde9f
--- /dev/null
+++ b/app/src/client/admin/images/icon/icon-sun.svg
@@ -0,0 +1,10 @@
+
diff --git a/app/src/client/admin/images/icon/icons-arrows.tsx b/app/src/client/admin/images/icon/icons-arrows.tsx
new file mode 100644
index 000000000..f2629fa52
--- /dev/null
+++ b/app/src/client/admin/images/icon/icons-arrows.tsx
@@ -0,0 +1,35 @@
+export function UpArrow() {
+ return (
+
+ );
+}
+
+export function DownArrow() {
+ return (
+
+ );
+}
diff --git a/app/src/client/admin/layout/DefaultLayout.tsx b/app/src/client/admin/layout/DefaultLayout.tsx
new file mode 100644
index 000000000..3495da057
--- /dev/null
+++ b/app/src/client/admin/layout/DefaultLayout.tsx
@@ -0,0 +1,41 @@
+import { useAuth } from 'wasp/client/auth';
+import { useState, ReactNode, FC } from 'react';
+import Header from '../components/Header';
+import Sidebar from '../components/Sidebar';
+
+interface Props {
+ children?: ReactNode;
+}
+
+const DefaultLayout: FC
+
+
+ Filters:
+
+
+
+
+
+
+ {
+ setEmail(e.currentTarget.value);
+ }}
+ className='rounded border border-stroke py-2 px-5 bg-white outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
+ />
+
+
+ {!isLoading && (
+
+
+
+ {!!statusOptions && statusOptions.length > 0 ? (
+ statusOptions.map((opt, idx) => (
+
+ {opt}
+ {
+ e.stopPropagation();
+ setStatusOptions((prevValue) => {
+ return prevValue?.filter((val) => val !== opt);
+ });
+ }}
+ className='z-30 cursor-pointer pl-2 hover:text-danger'
+ >
+
+
+
+ ))
+ ) : (
+
+ Select Status Filters
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ page
+ {
+ setPage(parseInt(e.currentTarget.value));
+ }}
+ className='rounded-md border-1 border-stroke bg-transparent px-4 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary'
+ />
+ / {data?.totalPages}
+
+ )}
+
+
+ {isLoading && (
+
+
+ Email / Username
+
+
+ Last Active
+
+
+ Subscription Status
+
+
+ Stripe ID
+
+
+ Has Paid
+
+
+
+
+
+ )}
+ {!!data?.users &&
+ data?.users?.length > 0 &&
+ data.users.map((user) => (
+
+
+ ))}
+
+
+
+
+
+ {user.email}
+{user.username}
+
+
+ + {user.lastActiveTimestamp.toLocaleDateString() + ' ' + user.lastActiveTimestamp.toLocaleTimeString()} +
+
+
+ {user.subscriptionStatus}
+
+
+ {user.stripeId}
+
+
+
+
+
+
+
+ {/* */}
+
+ );
+};
+
+export default DefaultLayout;
diff --git a/app/src/client/admin/pages/Calendar.tsx b/app/src/client/admin/pages/Calendar.tsx
new file mode 100644
index 000000000..41e056a43
--- /dev/null
+++ b/app/src/client/admin/pages/Calendar.tsx
@@ -0,0 +1,274 @@
+import Breadcrumb from '../components/Breadcrumb';
+import DefaultLayout from '../layout/DefaultLayout';
+
+const Calendar = () => {
+ return (
+
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+
+ {/* */}
+
+ {/* */}
+
+
+
+
+
+ {/* */}
+ | + Sunday + Sun + | ++ Monday + Mon + | ++ Tuesday + Tue + | ++ Wednesday + Wed + | ++ Thursday + Thur + | ++ Friday + Fri + | ++ Saturday + Sat + | +
|---|---|---|---|---|---|---|
|
+
+ 1
+
+
+
+ More
+
+
+
+
+ Redesign Website
+
+
+ 1 Dec - 2 Dec
+
+
+ |
+ + + 2 + + | ++ + 3 + + | ++ + 4 + + | ++ + 5 + + | ++ + 6 + + | ++ + 7 + + | +
| + + 8 + + | ++ + 9 + + | ++ + 10 + + | ++ + 11 + + | ++ + 12 + + | ++ + 13 + + | ++ + 14 + + | +
| + + 15 + + | ++ + 16 + + | ++ + 17 + + | ++ + 18 + + | ++ + 19 + + | ++ + 20 + + | ++ + 21 + + | +
| + + 22 + + | ++ + 23 + + | ++ + 24 + + | +
+
+ 25
+
+
+
+ More
+
+
+
+
+ App Design
+
+
+ 25 Dec - 27 Dec
+
+
+ |
+ + + 26 + + | ++ + 27 + + | ++ + 28 + + | +
| + + 29 + + | ++ + 30 + + | ++ + 31 + + | ++ + 1 + + | ++ + 2 + + | ++ + 3 + + | ++ + 4 + + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+ {/* */}
+
+
+ + Input Fields +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+ + Toggle switch input +
+
+
+
+
+
+ {/* */}
+
+
+ + Time and date +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + File upload +
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+ {/* */}
+
+
+ + Textarea Fields +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+ + Checkbox and radio +
+
+
+
+
+
+
+ + Select input +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Design
+
+
+
+
+
+ Development
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+
+
+ + Contact Form +
+
+ {/* */}
+
+
+
+
+ {/* */}
+
+
+
+ + Sign In Form +
+
+
+
+
+
+ + Sign Up Form +
+Hello world!
+ )
+}
+
+export default AdminMessages
diff --git a/app/src/client/admin/pages/Settings.tsx b/app/src/client/admin/pages/Settings.tsx
new file mode 100644
index 000000000..6cc19efaa
--- /dev/null
+++ b/app/src/client/admin/pages/Settings.tsx
@@ -0,0 +1,325 @@
+import { FormEvent } from 'react';
+import Breadcrumb from '../components/Breadcrumb';
+import toast from 'react-hot-toast';
+import DefaultLayout from '../layout/DefaultLayout';
+
+const Settings = () => {
+ const handleSubmit = (event: FormEvent
+
+
+
+
+
+
+
+
+
+
+ + Personal Information +
+
+
+
+
+
+
+
+
+
+ + Your Photo +
+
+
+
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+
+
+
+ + Attention needed +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when +
+
+
+ {/* */}
+
+
+
+
+
+ + Message Sent Successfully +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
+
+
+
+
+
+
+
+ + There were 1 errors with your submission +
+-
+
- + Lorem Ipsum is simply dummy text of the printing + +
+
+
+ {/* */}
+
+
+
+ + Normal Button +
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+
+
+ + Button With Icon +
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ );
+};
+
+function BuyMoreButton() {
+ return (
+
+
+
+
+ Account Information
+
+
+ -
+ {!!user.email && (
+
- Email address +
- + {user.email} + +
- Username +
- + {user.username} + +
- Subscription status + {user.hasPaid ? ( + <> + {user.subscriptionStatus !== 'past_due' ? ( +
- + + Active + + ) : ( +
- + Your Account is Past Due! Please Update your Payment Information + + )} +
- + N/A + +
- I agree to receiving marketing emails + <> +
+
+ )}
+ {!!user.username && (
+
+
+ )}
+ {/*
+
*/}
+
+
+
+ )}
+
+
+
+
+
+
+
+ Buy More/Upgrade
+
+
+ );
+}
+
+// function CustomerPortalButton() {
+// const handleClick = () => {
+// window.open(STRIPE_CUSTOMER_PORTAL_LINK, '_blank');
+// };
+
+// return (
+//
+//
+//
+// );
+// }
+
+const AccountPageWithCustomAuth = CustomAuthRequiredLayout(AccountPage);
+export default AccountPageWithCustomAuth;
diff --git a/app/src/client/app/BuildPage.tsx b/app/src/client/app/BuildPage.tsx
new file mode 100644
index 000000000..d7abf7bbd
--- /dev/null
+++ b/app/src/client/app/BuildPage.tsx
@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { type User } from 'wasp/entities';
+
+import CustomAuthRequiredLayout from './layout/CustomAuthRequiredLayout';
+import CustomSidebar from '../components/CustomSidebar';
+import { cn } from '../../shared/utils';
+
+import LoadingComponent from '../components/LoadingComponent';
+import { useBuildPage } from '../hooks/useBuildPage';
+import { filerOutComponentData } from '../utils/buildPageUtils';
+import UserPropertyHandler from '../components/buildPage/UserPropertyHandler';
+
+interface BuildPageProps {
+ user: User;
+}
+
+interface HeaderProps {
+ sidebarOpen: boolean;
+ setSidebarOpen: (open: boolean) => void;
+}
+
+export const Header: React.FC
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+ {/* */}
+
+ );
+};
+
+const BuildPageWithCustomAuth = CustomAuthRequiredLayout(BuildPage);
+export default BuildPageWithCustomAuth;
diff --git a/app/src/client/app/CheckoutPage.tsx b/app/src/client/app/CheckoutPage.tsx
new file mode 100644
index 000000000..8cf6cd167
--- /dev/null
+++ b/app/src/client/app/CheckoutPage.tsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+export default function CheckoutPage() {
+ const [paymentStatus, setPaymentStatus] = useState('loading');
+
+ const history = useHistory();
+ const location = useLocation();
+
+ useEffect(() => {
+ function delayedRedirect() {
+ return setTimeout(() => {
+ history.push('/build');
+ }, 2000);
+ }
+
+ const queryParams = new URLSearchParams(location.search);
+ const isSuccess = queryParams.get('success');
+ const isCanceled = queryParams.get('canceled');
+
+ if (isCanceled) {
+ setPaymentStatus('canceled');
+ } else if (isSuccess) {
+ setPaymentStatus('paid');
+ } else {
+ history.push('/build');
+ }
+ delayedRedirect();
+ return () => {
+ clearTimeout(delayedRedirect());
+ };
+ }, [location]);
+
+ return (
+
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+
+ {/* */}
+ <>
+
+
+ {/* */}
+
+ {error ? (
+
+ + Oops! Something went wrong. Our server is currently unavailable. Please try again later. +
+ ) : data ? ( ++ Build Page - No valid component found for this section. +
+ )} +
+
+ );
+}
diff --git a/app/src/client/app/ExamplesPage.tsx b/app/src/client/app/ExamplesPage.tsx
new file mode 100644
index 000000000..1505fa677
--- /dev/null
+++ b/app/src/client/app/ExamplesPage.tsx
@@ -0,0 +1,36 @@
+export default function ExamplesPage() {
+ return (
+
+
+
+
+ + )} +
+ + {paymentStatus === 'paid' + ? 'đĨŗ Payment Successful!' + : paymentStatus === 'canceled' + ? 'đĸ Payment Canceled' + : paymentStatus === 'error' && 'đ Payment Error'} +
+ {paymentStatus !== 'loading' && ( + + You are being redirected to your build page...+ + )} +
+
+ );
+}
diff --git a/app/src/client/app/PlayGroundPage.tsx b/app/src/client/app/PlayGroundPage.tsx
new file mode 100644
index 000000000..e324e9063
--- /dev/null
+++ b/app/src/client/app/PlayGroundPage.tsx
@@ -0,0 +1,217 @@
+import { useState, useEffect } from 'react';
+import _ from 'lodash';
+import { useSocket, useSocketListener } from 'wasp/client/webSocket';
+import { type User } from 'wasp/entities';
+
+import {
+ updateCurrentChat,
+ useQuery,
+ getChat,
+ getChatFromUUID,
+ getConversations,
+ getModels,
+} from 'wasp/client/operations';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+import CustomAuthRequiredLayout from './layout/CustomAuthRequiredLayout';
+import ChatLayout from './layout/ChatLayout';
+import ConversationsList from '../components/ConversationList';
+import NotificationBox from '../components/NotificationBox';
+
+import {
+ updateCurrentChatStatus,
+ getInProgressConversation,
+ getFormattedChatMessages,
+ continueChat,
+ initiateChat,
+ handleChatError,
+} from '../utils/chatUtils';
+import SelectTeamToChat from '../components/SelectTeamToChat';
+import Loader from '../admin/common/Loader';
+import { SelectedModelSchema } from '../interfaces/BuildPageInterfaces';
+
+const PlayGroundPage = ({ user }: { user: User }) => {
+ const { data: userTeams, isLoading: isLoading } = useQuery(getModels, { type_name: 'team' });
+ const [refetchAllChatDetails, setRefetchAllChatDetails] = useState(false);
+ const { socket } = useSocket();
+ const location = useLocation();
+ const { pathname } = location;
+ const history = useHistory();
+ const queryParams = new URLSearchParams(location.search);
+ const [notificationErrorMessage, setNotificationErrorMessage] = useState
+
+
+
+ + + Captân.ai + + +
+
+
+
+
+
+ );
+ }
+
+ const notificationOnClick = () => {
+ setNotificationErrorMessage(null);
+ };
+ return (
+
+ {currentChatDetails ? (
+
+
+ {conversations && conversations.length > 0 ? (
+ <>
+
+ ) : (
+ + Chatting with{' '} + + {currentChatDetails.selectedTeam} + +
+
+
+ )}
+
+
+
+ );
+}
diff --git a/app/src/client/app/layout/ChatLayout.tsx b/app/src/client/app/layout/ChatLayout.tsx
new file mode 100644
index 000000000..4181c9e50
--- /dev/null
+++ b/app/src/client/app/layout/ChatLayout.tsx
@@ -0,0 +1,96 @@
+import { type Chat } from 'wasp/entities';
+
+import { useSocketListener } from 'wasp/client/webSocket';
+import { useAuth } from 'wasp/client/auth';
+import { useState, ReactNode, FC, useRef, useEffect } from 'react';
+import { Header } from '../BuildPage';
+import ChatSidebar from '../../components/ChatSidebar';
+import ChatForm from '../../components/ChatForm';
+import { useHistory } from 'react-router-dom';
+import AutoScrollContainer from '../../components/AutoScrollContainer';
+
+interface Props {
+ children?: ReactNode;
+ handleFormSubmit: any;
+ currentChatDetails?: Chat | null;
+ triggerChatFormSubmitMsg?: string | null;
+ refetchAllChatDetails: boolean;
+ triggerScrollBarMove: boolean;
+}
+
+const ChatLayout: FC = ({
+ children,
+ handleFormSubmit,
+ currentChatDetails,
+ triggerChatFormSubmitMsg,
+ refetchAllChatDetails,
+ triggerScrollBarMove,
+}) => {
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+ const [shouldAutoScroll, setShouldAutoScroll] = useState(false);
+
+ const { data: user } = useAuth();
+ const scrollRef = useRef(null);
+ const history = useHistory();
+
+ useEffect(() => {
+ if (!user) {
+ history.push('/login');
+ } else {
+ if (!user.hasPaid && user.isSignUpComplete) {
+ history.push('/pricing');
+ }
+ }
+ }, [user, history]);
+
+ useSocketListener('newMessageFromTeam', () => setShouldAutoScroll(true));
+ useSocketListener('streamFromTeamFinished', () => setShouldAutoScroll(false));
+
+ const wrapperClass = document.body.classList.contains('server-error')
+ ? 'h-[calc(100vh-173px)]'
+ : 'h-[calc(100vh-80px)]';
+
+ return (
+ = {
+ login: 'Sign in to your account',
+ signup: 'Create an account',
+};
+
+function Auth({
+ state,
+ appearance,
+ logo,
+ socialLayout = 'horizontal',
+ additionalSignupFields,
+}: {
+ state: State;
+} & CustomizationOptions & {
+ additionalSignupFields?: any;
+ }) {
+ const [errorMessage, setErrorMessage] = useState(null);
+ const [successMessage, setSuccessMessage] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+
+ // TODO(matija): this is called on every render, is it a problem?
+ // If we do it in useEffect(), then there is a glitch between the default color and the
+ // user provided one.
+ const customTheme = createTheme(appearance ?? {});
+
+ // const title = titles[state];
+
+ const socialButtonsDirection = socialLayout === 'vertical' ? 'vertical' : 'horizontal';
+
+ return (
+
+
+ );
+}
+
+export type CustomizationOptions = {
+ logo?: string;
+ socialLayout?: 'horizontal' | 'vertical';
+ appearance?: Parameters[0];
+ state: State;
+};
+
+export function LoginForm({ appearance, logo, socialLayout, state }: CustomizationOptions) {
+ return ();
+ const {
+ register,
+ formState: { errors },
+ handleSubmit: hookFormHandleSubmit,
+ } = hookForm;
+
+ useEffect(() => {
+ if (tocChecked) {
+ setErrorMessage(null);
+ }
+ }, [tocChecked]);
+
+ const handleTocChange = (event: React.ChangeEvent) => {
+ setTocChecked(event.target.checked);
+ };
+
+ const handleMarketingEmailsChange = (event: React.ChangeEvent) => {
+ setMarketingEmailsChecked(event.target.checked);
+ };
+
+ const updateLocalStorage = () => {
+ localStorage.removeItem('hasAcceptedTos');
+ localStorage.removeItem('hasSubscribedToMarketingEmails');
+ localStorage.setItem('hasAcceptedTos', JSON.stringify(tocChecked));
+ localStorage.setItem('hasSubscribedToMarketingEmails', JSON.stringify(marketingEmailsChecked));
+ };
+
+ const handleClick = (event: React.MouseEvent, googleSignInUrl: string) => {
+ event.preventDefault();
+ if (loginFlow === State.Login) {
+ updateLocalStorage();
+ window.location.href = googleSignInUrl;
+ } else {
+ if (tocChecked) {
+ updateLocalStorage();
+ window.location.href = googleSignInUrl;
+ } else {
+ setErrorMessage(checkBoxErrMsg);
+ }
+ }
+ };
+
+ const googleBtnText = loginFlow === State.Login ? 'Sign in with Google' : 'Sign up with Google';
+
+ return (
+ <>
+ {loginFlow === State.Signup && (
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/src/client/auth/authWrapper.tsx b/app/src/client/auth/authWrapper.tsx
new file mode 100644
index 000000000..672abf56c
--- /dev/null
+++ b/app/src/client/auth/authWrapper.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export function AuthWrapper({ children }: { children: ReactNode }) {
+ return (
+ = ({
+ agentConversationHistory,
+ initialState = false,
+ isAgentWindow = false,
+ isDeploymentInstructions = false,
+ containerTitle,
+}) => {
+ const [showHistory, setShowHistory] = useState(initialState);
+
+ const toggleHistory = () => {
+ setShowHistory(!showHistory);
+ };
+
+ const bg = isDeploymentInstructions ? '' : 'bg-airt-primary';
+ const maxH = isDeploymentInstructions ? 700 : 400;
+
+ return (
+ = ({
+ loadingMessage = 'Loading...', // Default loading message
+ bgColor = 'airt-primary',
+ showLogo = true,
+}) => {
+ const [frameIndex, setFrameIndex] = useState(0); // State to track the current frame of the animation
+ const loadingAnimation = ['â', '\\', '|', '/']; // Characters used for the loading animation
+ const textColor = bgColor === 'airt-primary' ? 'airt-font-base' : 'airt-primary'; // Text color based on background color
+
+ useEffect(() => {
+ // Set up an interval to cycle through the animation characters
+ const interval = setInterval(() => {
+ setFrameIndex((prevIndex) => (prevIndex + 1) % loadingAnimation.length); // Cycle through indices in a loop
+ }, 250); // Animation frame update interval in milliseconds
+
+ // Cleanup function to clear the interval on component unmount
+ return () => clearInterval(interval);
+ }, [loadingAnimation.length]); // Dependence on the length is constant, but included for completeness
+
+ return (
+ 
;
+
+export default function AppNavBar() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ const { data: user, isLoading: isUserLoading } = useAuth();
+ return (
+
+
+
+
+ );
+}
diff --git a/app/src/client/components/AutoScrollContainer.tsx b/app/src/client/components/AutoScrollContainer.tsx
new file mode 100644
index 000000000..314234802
--- /dev/null
+++ b/app/src/client/components/AutoScrollContainer.tsx
@@ -0,0 +1,57 @@
+import React, { useRef, useEffect } from 'react';
+
+interface AutoScrollContainerProps {
+ children: React.ReactNode;
+ shouldAutoScroll: boolean;
+}
+
+const AutoScrollContainer: React.FC = ({ children, shouldAutoScroll }) => {
+ const scrollRef = useRef(null);
+ const userHasScrolled = useRef(false);
+
+ useEffect(() => {
+ const scrollElement = scrollRef.current;
+
+ // MutationObserver to observe changes in the container
+ const observer = new MutationObserver(() => {
+ if (scrollElement) {
+ scrollElement.scrollTo({
+ top: scrollElement.scrollHeight,
+ behavior: 'smooth',
+ });
+ }
+ });
+
+ if (scrollElement) {
+ observer.observe(scrollElement, { childList: true, subtree: true });
+ }
+
+ // Disconnect observer on cleanup
+ return () => {
+ observer.disconnect();
+ };
+ }, []); // Observer itself does not depend on `shouldAutoScroll`
+
+ useEffect(() => {
+ // Reset user scrolling flag if auto-scroll is re-enabled
+ if (shouldAutoScroll) {
+ userHasScrolled.current = false;
+ }
+ }, [shouldAutoScroll]);
+
+ // Handle user scroll to disable auto-scrolling
+ const handleUserScroll = (event: React.UIEvent) => {
+ // Check if the user has scrolled up from the bottom
+ if (event.currentTarget.scrollTop < event.currentTarget.scrollHeight - event.currentTarget.clientHeight) {
+ userHasScrolled.current = true;
+ }
+ };
+
+ return (
+ ;
+ label?: string;
+ theme?: 'light' | 'dark';
+}
+
+export default function Button({ onClick, label, theme = 'dark' }: ButtonProps) {
+ const buttonBG = theme === 'dark' ? 'bg-airt-primary' : 'bg-airt-secondary';
+ const buttonTextColor = theme === 'dark' ? 'text-airt-font-base' : 'bg-airt-primary';
+ return (
+
+ );
+}
diff --git a/app/src/client/components/ChatForm.tsx b/app/src/client/components/ChatForm.tsx
new file mode 100644
index 000000000..003077cab
--- /dev/null
+++ b/app/src/client/components/ChatForm.tsx
@@ -0,0 +1,141 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+
+import TextareaAutosize from 'react-textarea-autosize';
+import { useSocketListener } from 'wasp/client/webSocket';
+import { type Chat } from 'wasp/entities';
+
+interface ChatFormProps {
+ handleFormSubmit: (userQuery: string, isUserRespondedWithNextAction?: boolean, retrySameChat?: boolean) => void;
+ currentChatDetails: Chat;
+ triggerChatFormSubmitMsg?: string | null;
+}
+
+export default function ChatForm({ handleFormSubmit, currentChatDetails, triggerChatFormSubmitMsg }: ChatFormProps) {
+ const [formInputValue, setFormInputValue] = useState('');
+ const [disableFormSubmit, setDisableFormSubmit] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [toggleTextAreaFocus, setToggleTextAreaFocus] = useState(false);
+ const isProcessing = useRef(false);
+ const textAreaRef = React.useRef();
+ const isEmptyMessage = formInputValue.trim().length === 0;
+
+ const formRef = useCallback(
+ async (node: any) => {
+ if (node !== null && triggerChatFormSubmitMsg) {
+ await handleFormSubmit(triggerChatFormSubmitMsg, true);
+ }
+ },
+ [triggerChatFormSubmitMsg]
+ );
+
+ useEffect(() => {
+ if (toggleTextAreaFocus && (!disableFormSubmit || !isSubmitting || !isProcessing.current)) {
+ if (textAreaRef.current) {
+ textAreaRef.current.focus();
+ }
+ }
+ }, [disableFormSubmit, isSubmitting, isProcessing.current, toggleTextAreaFocus]);
+
+ const setFocusOnTextArea = () => {
+ setToggleTextAreaFocus(true);
+ };
+ useSocketListener('streamFromTeamFinished', setFocusOnTextArea);
+
+ useEffect(() => {
+ if (currentChatDetails) {
+ setDisableFormSubmit(currentChatDetails.team_status === 'inprogress');
+ } else {
+ setDisableFormSubmit(false);
+ }
+ }, [currentChatDetails]);
+
+ const submitForm = async (inputValue: string) => {
+ if (isSubmitting || disableFormSubmit || isProcessing.current || isEmptyMessage) return;
+
+ setIsSubmitting(true);
+ setToggleTextAreaFocus(false);
+ isProcessing.current = true;
+
+ try {
+ await handleFormSubmit(inputValue);
+ setFormInputValue('');
+ } catch (error) {
+ console.error('Error submitting form:', error);
+ } finally {
+ setIsSubmitting(false);
+ isProcessing.current = false;
+ }
+ };
+
+ const handleSubmit = async (event: React.FormEvent) => {
+ event.preventDefault();
+ await submitForm(formInputValue);
+ };
+
+ const handleButtonClick = async (event: React.MouseEvent) => {
+ event.preventDefault();
+ await submitForm(formInputValue);
+ };
+
+ const handleKeyDown = async (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ await submitForm(formInputValue);
+ }
+ };
+
+ return (
+ (null);
+ const sidebar = useRef(null);
+
+ const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
+ const [sidebarExpanded, setSidebarExpanded] = useState(
+ storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'
+ );
+
+ const handlechatNameChange = async (chatId: number, newChatName: string) => {
+ try {
+ await updateCurrentChat({
+ id: chatId,
+ data: {
+ name: newChatName,
+ isChatNameUpdated: true,
+ },
+ });
+ } catch (err: any) {
+ console.log('Unable to update the chat name. Please try again later.');
+ }
+ };
+
+ const { data: chats, isLoading: isLoadingChats, refetch: refetchChats } = useQuery(getChats);
+
+ useEffect(() => {
+ refetchChats();
+ }, [refetchAllChatDetails]);
+
+ // close on click outside
+ useEffect(() => {
+ const clickHandler = ({ target }: MouseEvent) => {
+ if (!sidebar.current || !trigger.current) return;
+ if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) return;
+ setSidebarOpen(false);
+ };
+ document.addEventListener('click', clickHandler);
+ return () => document.removeEventListener('click', clickHandler);
+ });
+
+ // close if the esc key is pressed
+ useEffect(() => {
+ const keyHandler = ({ keyCode }: KeyboardEvent) => {
+ if (!sidebarOpen || keyCode !== 27) return;
+ setSidebarOpen(false);
+ };
+ document.addEventListener('keydown', keyHandler);
+ return () => document.removeEventListener('keydown', keyHandler);
+ });
+
+ useEffect(() => {
+ localStorage.setItem('sidebar-expanded', sidebarExpanded.toString());
+ if (sidebarExpanded) {
+ document.querySelector('body')?.classList.add('sidebar-expanded');
+ } else {
+ document.querySelector('body')?.classList.remove('sidebar-expanded');
+ }
+ }, [sidebarExpanded]);
+
+ const handleCreateNewChat: MouseEventHandler = async (event) => {
+ setSidebarOpen(false);
+ history.push(`/playground`);
+ // try {
+ // const props: CreateNewChatProps = {
+ // teamName: null,
+ // };
+ // const chat: Chat = await createNewChat(props);
+ // history.push(`/playground/${chat.uuid}`);
+ // } catch (err: any) {
+ // console.log('Error: ' + err.message);
+ // if (err.message === 'No Subscription Found') {
+ // history.push('/pricing');
+ // } else {
+ // window.alert('Error: Something went wrong. Please try again later.');
+ // }
+ // }
+ };
+
+ return (
+
+ );
+};
+
+export default ChatSidebar;
diff --git a/app/src/client/components/ConversationList.tsx b/app/src/client/components/ConversationList.tsx
new file mode 100644
index 000000000..ba489f464
--- /dev/null
+++ b/app/src/client/components/ConversationList.tsx
@@ -0,0 +1,184 @@
+import { useSocketListener } from 'wasp/client/webSocket';
+import { type Conversation, type Chat } from 'wasp/entities';
+
+import React from 'react';
+import { useState } from 'react';
+import Markdown from 'markdown-to-jsx';
+import LetterByLetterDisplay from './LetterByLetterDisplay';
+import RetryConversation from './RetryConversation';
+import AgentConversationHistory from './AgentConversationHistory';
+import AnimatedCharacterLoader from './AnimatedCharacterLoader';
+import logo from '../static/logo.svg';
+
+type ConversationsListProps = {
+ conversations: Conversation[];
+ currentChatDetails: Chat;
+ handleFormSubmit: any;
+ userSelectedActionMessage?: string | null;
+ onStreamAnimationComplete?: () => void;
+};
+
+export default function ConversationsList({
+ conversations,
+ currentChatDetails,
+ handleFormSubmit,
+ userSelectedActionMessage,
+ onStreamAnimationComplete,
+}: ConversationsListProps) {
+ const [streamingAgentResponse, setStreamingAgentResponse] = useState('');
+ const lastConversationIdx = conversations.length - 1;
+
+ useSocketListener('newMessageFromTeam', (message: any) => setStreamingAgentResponse(message));
+ useSocketListener('streamFromTeamFinished', () => setStreamingAgentResponse(''));
+
+ return (
+ (null);
+ const sidebar = useRef(null);
+
+ const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
+ const [sidebarExpanded, setSidebarExpanded] = useState(
+ storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'
+ );
+
+ // close on click outside
+ useEffect(() => {
+ const clickHandler = ({ target }: MouseEvent) => {
+ if (!sidebar.current || !trigger.current) return;
+ if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) return;
+ setSidebarOpen(false);
+ };
+ document.addEventListener('click', clickHandler);
+ return () => document.removeEventListener('click', clickHandler);
+ });
+
+ // close if the esc key is pressed
+ useEffect(() => {
+ const keyHandler = ({ keyCode }: KeyboardEvent) => {
+ if (!sidebarOpen || keyCode !== 27) return;
+ setSidebarOpen(false);
+ };
+ document.addEventListener('keydown', keyHandler);
+ return () => document.removeEventListener('keydown', keyHandler);
+ });
+
+ useEffect(() => {
+ localStorage.setItem('sidebar-expanded', sidebarExpanded.toString());
+ if (sidebarExpanded) {
+ document.querySelector('body')?.classList.add('sidebar-expanded');
+ } else {
+ document.querySelector('body')?.classList.remove('sidebar-expanded');
+ }
+ }, [sidebarExpanded]);
+
+ const handleClick = (selectedItemLable: string) => {
+ onSideNavItemClick(selectedItemLable);
+ setSidebarOpen(false);
+ };
+
+ return (
+
+ );
+};
+
+export default CustomSidebar;
diff --git a/app/src/client/components/DropdownUser.tsx b/app/src/client/components/DropdownUser.tsx
new file mode 100644
index 000000000..f80e20725
--- /dev/null
+++ b/app/src/client/components/DropdownUser.tsx
@@ -0,0 +1,83 @@
+import { type User } from 'wasp/entities';
+import { useEffect, useRef, useState } from 'react';
+import { CgProfile } from 'react-icons/cg';
+import { UserMenuItems } from './UserMenuItems';
+import { cn } from '../../shared/utils';
+
+const DropdownUser = ({ user }: { user: Partial }) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const trigger = useRef(null);
+ const dropdown = useRef(null);
+
+ const toggleDropdown = () => setDropdownOpen((prev) => !prev);
+
+ useEffect(() => {
+ const clickHandler = ({ target }: MouseEvent) => {
+ if (!dropdown.current) return;
+ if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) {
+ return;
+ }
+ setDropdownOpen(false);
+ };
+ document.addEventListener('click', clickHandler);
+ return () => document.removeEventListener('click', clickHandler);
+ });
+
+ // close if the esc key is pressed
+ useEffect(() => {
+ const keyHandler = ({ keyCode }: KeyboardEvent) => {
+ if (!dropdownOpen || keyCode !== 27) return;
+ setDropdownOpen(false);
+ };
+ document.addEventListener('keydown', keyHandler);
+ return () => document.removeEventListener('keydown', keyHandler);
+ });
+
+ return (
+ = ({
+ allUserProperties,
+ type_name,
+ jsonSchema,
+ validationURL,
+ updateExistingModel,
+ onSuccessCallback,
+ onCancelCallback,
+ onDeleteCallback,
+ addPropertyClick,
+}) => {
+ const { formData, handleChange, formErrors, setFormErrors } = useForm({
+ jsonSchema,
+ defaultValues: updateExistingModel,
+ });
+
+ const {
+ isLoading,
+ notification,
+ instructionForDeployment,
+ handleSubmit,
+ notificationOnClick,
+ setInstructionForDeployment,
+ } = useFormSubmission({
+ type_name,
+ validationURL,
+ updateExistingModel,
+ onSuccessCallback,
+ setFormErrors,
+ });
+
+ const refValues = usePropertyReferenceValues({
+ jsonSchema,
+ allUserProperties,
+ updateExistingModel,
+ });
+
+ const cancelButtonRef = useRef(null);
+ const isDeployment = type_name === 'deployment';
+
+ useDeploymentInstructions(updateExistingModel, type_name, setInstructionForDeployment);
+ useEscapeKeyHandler(cancelButtonRef);
+
+ const onSubmit = (event: React.FormEvent) => {
+ handleSubmit(event, formData, refValues);
+ };
+
+ return (
+ <>
+ {!instructionForDeployment && isDeployment && (
+ = ({
+ chatId,
+ chatName,
+ onValueChange,
+}) => {
+ const [isEditing, setIsEditing] = useState(false);
+ const [inputValue, setInputValue] = useState(chatName);
+
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ if (isEditing) {
+ inputRef.current?.focus();
+ }
+ }, [isEditing]);
+
+ useEffect(() => {
+ setInputValue(chatName);
+ }, [chatName]);
+
+ const handleIconClick = (event: React.MouseEvent) => {
+ event.preventDefault();
+ setIsEditing(true);
+ };
+
+ const handleInputChange = (event: React.ChangeEvent) => {
+ setInputValue(event.target.value);
+ };
+
+ const handleSubmit = (event: FormEvent) => {
+ event.preventDefault();
+ onValueChange(chatId, inputValue);
+ setIsEditing(false);
+ };
+
+ const handleBlur = () => {
+ onValueChange(chatId, inputValue);
+ setIsEditing(false);
+ };
+
+ return (
+ (false);
+// const { data: user } = useAuth();
+
+// async function handleClick(tierId: string) {
+// if (!user) {
+// history.push('/login');
+// } else {
+// try {
+// // setIsStripePaymentLoading(tierId);
+// setIsLoading(true);
+// let stripeResults = await stripePayment(tierId);
+
+// if (stripeResults?.sessionUrl) {
+// window.open(stripeResults.sessionUrl, '_self');
+// }
+// } catch (error: any) {
+// console.error(error?.message ?? 'Something went wrong.');
+// } finally {
+// // setIsStripePaymentLoading(false);
+// setIsLoading(false);
+// }
+// }
+// }
+
+// return (
+//
+
+ );
+};
+
+export default PricingPage;
diff --git a/app/src/client/app/PrivacyPage.tsx b/app/src/client/app/PrivacyPage.tsx
new file mode 100644
index 000000000..476d8405b
--- /dev/null
+++ b/app/src/client/app/PrivacyPage.tsx
@@ -0,0 +1,378 @@
+export default function PrivacyPage() {
+ return (
+
+
+ {/* + Coming soon,{' '} + + everything is free for now! + +
++ Unlock FastAgency's full capabilities with an active subscription. Explore all features with a hassle-free + 30-day free trialâno credit card required.{' '} + 4242 4242 4242 4242 4242 +
*/} + {/* */}
+ {/*
+
+ {tiers.map((tier) => (
+
*/}
+
+ {tier.bestDeal && (
+
+ )}
+
+ ))}
+
+
+ {!!user && user.hasPaid ? (
+
+ {tier.id === 'enterprise-tier' ? 'Contact us' : 'Manage Subscription'}
+
+ ) : (
+
+ )}
+
+
+ + {tier.name} +
+{tier.description}
++ + {tier.priceMonthly} + + + /month + +
+-
+ {tier.features.map((feature) => (
+
- + + {feature} + + ))} +
+
+ );
+}
diff --git a/app/src/client/app/TocPage.tsx b/app/src/client/app/TocPage.tsx
new file mode 100644
index 000000000..dea33e7ef
--- /dev/null
+++ b/app/src/client/app/TocPage.tsx
@@ -0,0 +1,197 @@
+export default function TocPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
*/} + {/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Privacy Policy
+Last updated January 29, 2024
+ ++ Airt technologies, Inc. ("we", "us", or "our") is committed to protecting the privacy of our users. This + Privacy Policy explains how we collect, use, and disclose information through our SaaS tool,{' '} + FastAgency (the "Service"). +
+Information We Collect
++ At FastAgency, we value your privacy and are committed to ensuring the highest level of confidentiality + and security for your information. Here's what you need to know about the information we collect when you + use our Service: +
++
-
+
- + Account Information: When you create a FastAgency account, we collect your name and email + address. This information is essential to personalize your experience and enable various features of the + Service. + +
- + Integrations: As you integrate your various marketing platforms with our Service, we collect + information that you input, including the details about the platforms you're connecting and any + associated data. This data is necessary to provide you with accurate analytics, reports, and insights. + For data collected from Google APIs, we adhere to Google's API Services User Data Policy, including the + Limited Use requirements. Continue reading for further information. + +
- + Chat Interactions and AI Data Sharing: Your chat interactions and data from connected third-party + services may be shared with our privately deployed OpenAI models hosted on Microsoft Azure. This sharing + is essential for the service and is detailed in the section below: "Third-Party and Proprietary AI + Tools." + +
- + Usage Information: To help us understand how you interact with our Service and enable us to + improve your user experience, we collect information about your usage. This may include log data, device + information, and other data related to your activities within our Service. + +
- + Data Processing: At FastAgency, your data's privacy is a top priority. We process data on-the-fly + and do not store any data in databases, except for chat history as detailed in the "Third-Party and + Proprietary AI Tools" section. This ensures your data stays where it belongsâwith you. + +
We use the information we collect to:
++
-
+
- + Provide, Maintain, and Improve the Service: We use your information to deliver the services you + request, maintain your account, and enhance your experience with FastAgency. + +
- + Respond to Your Requests and Inquiries: Your information helps us respond to your customer + service requests, support needs, and other inquiries. + +
- + Communicate with You: We use your information to communicate with you about the Service, updates, + and other informational or promotional content. + +
- + Analyze and Monitor Usage: We use analytics tools to track how users interact with the Service, + which helps us make data-driven decisions for improvements. + +
- + Detect, Investigate, and Prevent Fraud and Other Illegal Activities: We use your information to + protect the security and integrity of the Service by detecting and preventing fraudulent or illegal + activities. + +
Authentication And Authorized Data Access
++ User authenticates with the 3rd party provider such as Google account. Upon authentication, user allows + the application: +
++
-
+
- Associate user with personal info on Google +
- See user's personal info, including any personal info user made publicly available +
- View user's email address +
+
+ Email address is stored in the database of the application while the other credentials of authenticated + users are encrypted and stored within the infrastructure of Google. This can be used to restrict or fully + block the service for a particular user in case of the breach of the terms of use. User's email + address can be deleted upon the request. +
++
Revoke Access to Your Google Account
+ ++ To remove access of the application to your account, you can do it directly in your Google account by + following this link:{' '} + + https://myaccount.google.com/permissionsâ + +
+Google API Services User Data Policy
+Google API Services Disclosure
++ FastAgency's use and transfer of information received from Google APIs adhere to{' '} + + Google API Services User Data Policy + + , including the Limited Use requirements. We recommend reviewing Google API Services User Data Policy to + better understand their practices. +
++
Use of Google API Services Data
++ When you choose to connect various Google services to FastAgency, we require specific permissions to fetch + and display data for your interactive queries. Below are the permissions required for each Google service: +
++
-
+
- + Google Analytics:{' '} + + https://developers.google.com/analytics/devguides/config/admin/v1 + {' '} + - Enables you to interact with your Google Analytics data through FastAgency. + + + {/*
- + Google Ad:{' '} + + https://developers.google.com/google-ads/api/docs/oauth/internals + {' '} + - Allows FastAgency to fetch and display your Google Ads data for interactive queries. + */} +
- + Google Search Console:{' '} + + https://developers.google.com/webmaster-tools/v1/sites/get + {' '} + - Permits FastAgency to access and display your Google Search Console data, making it available for + interactive chat. + +
+
You may choose to connect one, multiple, or none of these services as per your preference.
+Third-Party and Proprietary AI Tools
++ Our chatbot service utilizes advanced AI technology by employing privately deployed OpenAI models on + Microsoft Azure. This approach allows us to generate contextually relevant and accurate responses based on + your interactions and queries, ensuring a high-quality user experience. +
++
Data Sharing in Different Use Cases
++ Your chat interactions are processed using our privately deployed OpenAI models on Microsoft Azure. This + ensures that your data, including chat history, user metrics, and dimensions from integrated services like + Google Analytics, Google Ads, and Facebook Ads, is not shared with OpenAI directly. +
++
Here's a breakdown of the specific data shared from each source:
++
+ Google Analytics: Your Google Analytics data includes website traffic information, user behavior, + and engagement metrics from your connected websites. Metrics like page views, session duration, bounce + rate, and user demographics. By incorporating these insights, the chatbot can tailor its responses to + align with the user's website-related inquiries. +
+ {/**/} + {/*
+ Google Ads: Data from your Google Ads campaigns offers insights into your advertising efforts, ad + performance, and user interactions with your advertisements. Key metrics such as ad clicks, impressions, + click-through rates (CTR), and conversion rates are integrated into the chatbot's learning process. This + integration enables the chatbot to provide more informed and relevant responses regarding your advertising + strategies. +
*/} ++
+ Google Search Console: Information gathered from Google Search Console sheds light on your + website's visibility in Google search results. Details about search queries, click-through rates (CTR), + and average position help the chatbot understand user intent and prevalent search trends. By leveraging + this data, the chatbot can offer insights and answers that align with current search behaviors. +
++
+ Chat Interactions: This refers to the text-based interactions you have with the chatbot within the + FastAgency platform. The content of these conversations, including your questions and responses. This data + aids in refining the AI's ability to comprehend inputs and generate contextually accurate responses. +
++
+ All of the data sources mentioned above are crucial for enhancing the chatbot's ability to provide + accurate and contextually relevant responses. When chatting directly on our website, certain data points + from your interactions and connected platforms are processed using our privately deployed OpenAI models on + Microsoft Azure. We ensure that only relevant and necessary data are shared to maintain the effectiveness + of the chatbot's functionality. +
+Data Storage on Azure Database
++ While we do not directly store raw data from third-party sources such as Google Ads, Google Analytics, or + Facebook Ads, it's crucial to understand that your chat history may contain references to or summaries of + data from these services. Retaining this chat history is not just for record-keeping; it's a fundamental + component for the seamless functionality of our chatbot service. This chat data is securely stored in + Azure Database service, a cloud-based database, in compliance with Azure privacy policy ( + + https://learn.microsoft.com/en-us/azure/compliance/ + + ). Your chat history is retained indefinitely, but you have the option to delete it at any time through + the settings in our application. +
+User Consent Process
++ During your registration with FastAgency, we require your explicit consent regarding our privacy + practices. As part of the sign-up process, you will encounter a checkbox indicating that you have read and + agree to our Terms and Conditions and Privacy Policy. By checking this box, you acknowledge your + understanding and agreement to how we handle your data as detailed in these documents. Only upon agreeing + to these terms will the chatbot service proceed with using your data. You have the option to withdraw your + consent at any point, read more below. +
+Opt-Out Options
++ If you choose to withdraw your consent and opt-out of data sharing with third-party tools, you will no + longer be able to use the FastAgency service. The nature of our tool requires data sharing for its basic + functionality. Therefore, opting out effectively means discontinuing use of the service. +
+Agreement
++ By using our chatbot service, you explicitly consent to your chat data being processed as described above. + We ensure that your data is handled securely and in accordance with this privacy policy, as well as Azure + privacy policy. +
++
+ If you do not agree with this policy, please refrain from signing up and using FastAgency. +
+Google Analytics
++ Google Analytics is used across fastagency.ai domain in order to collect information about the users' + interactions with the site as well as to identify returning visits, location, device data and engagement + signals. Collected data helps to understand the relevancy and general usage of the tool hence, to provide + better experience and solutions towards the needs of the users, fix errors and bugs. No data is shared + with the 3rd party organizations or individuals. +
+Information Sharing and Disclosure
+We may share your information with third parties in the following circumstances:
++
-
+
- + Service Providers: We may share your information with third-party service providers who perform services + on our behalf, such as hosting, analytics, and customer support. + +
- + AI Data Sharing: Your chat interactions and data from connected third-party services may be shared with + our in-house AI algorithms. This sharing is essential for the service and is detailed in the section + above "Third-Party and Proprietary AI Tools". + +
- + Compliance with Laws: We may disclose your information as required by law or in response to legal + process, including subpoenas, court orders, and requests from law enforcement. + +
- + Business Transfers: If we are involved in a merger, acquisition, or sale of all or a portion of our + assets, your information may be transferred as part of that transaction. + +
- Your Consent: We may disclose your information with your consent. +
Your Choices
++ You can access and update your account information through the Service. You can also unsubscribe from our + promotional emails by following the instructions in the email. +
+Data Retention
++ We retain the information we collect for as long as necessary to provide the Service and fulfill the + purposes described in this Privacy Policy. When we no longer need the information, we will securely delete + it or de-identify it. Your chat history is retained indefinitely, but you have the option to delete it at + any time through the settings in our application. +
+Security
++ We take reasonable measures to protect your information from unauthorized access, use, disclosure, and + destruction. However, no method of transmission over the internet or method of electronic storage is + completely secure. +
+Changes to this Privacy Policy
++ We may update this Privacy Policy from time to time. If we make any material changes, we will notify you + by email or by posting a notice on our website prior to the change becoming effective. +
+Contact Us
++ In order to receive further information regarding use of the Site, please contact us at:{' '} + + support@fastagency.ai + + . +
+
+
+ );
+}
diff --git a/app/src/client/app/TutorialPage.tsx b/app/src/client/app/TutorialPage.tsx
new file mode 100644
index 000000000..e3d4515da
--- /dev/null
+++ b/app/src/client/app/TutorialPage.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import {
+ Card,
+ CardBody,
+ Stack,
+ Heading,
+ Text,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalBody,
+ ModalCloseButton,
+ useDisclosure,
+ Image,
+ Box,
+ ChakraProvider,
+} from '@chakra-ui/react';
+
+export default function TutorialPage() {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const [selectedVideo, setSelectedVideo] = useState('');
+
+ const data = [
+ {
+ link: 'https://www.youtube.com/embed/9y4cDOkWIBw',
+ heading: 'Building and Deploying SaaS with AI Agents and Multi-Agent Teams',
+ description:
+ 'Build a powerful SaaS solution with FastAgency. This tutorial demonstrates how to incorporate AI agents and multi-agent teams into your app effortlessly.',
+ thumbnail: `https://img.youtube.com/vi/9y4cDOkWIBw/0.jpg`,
+ },
+ {
+ link: 'https://www.youtube.com/embed/mD105mzcbP8',
+ heading: 'Creating and Integrating a Web Surfer Agent',
+ description:
+ 'Enhance your SaaS with web surfing capabilities using FastAgency. See how to build and deploy an app that utilizes this powerful agent.',
+ thumbnail: `https://img.youtube.com/vi/mD105mzcbP8/0.jpg`,
+ },
+ ];
+
+ const handleCardClick = (videoLink: string) => {
+ setSelectedVideo(videoLink);
+ onOpen();
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Terms & Conditions
+Last updated January 29, 2024
+ ++ These terms and conditions ("Terms") govern your access to and use of FastAgency, a Software-as-a-Service + tool ("Service") provided by airt technologies, Inc. ("we" or "us"). By accessing or using the Service, + you agree to be bound by these Terms. If you do not agree to these Terms, you may not access or use the + Service. +
+Use Terms for FastAgency
++ Subject to these Terms, we grant you a limited, non-exclusive, non-transferable, revocable license to use + the Service for your internal business purposes during the term of these Terms. +
++
+ You may not use the Service in any way that could damage, disable, overburden, or impair the Service or + interfere with any other party's use and enjoyment of the Service. You may not attempt to gain + unauthorized access to the Service or any part of it, other accounts, computer systems, or networks + connected to the Service, through hacking, password mining, or any other means. +
++
+ You are solely responsible for all data, information, and content uploaded, stored, or processed using the + Service. You represent and warrant that you have the necessary rights to upload, store, and process such + data, information, and content using the Service and that your use of the Service complies with all + applicable laws, regulations, and industry standards. +
+Payment and Subscription
+By subscribing to FastAgency, you agree to the following terms and conditions:
++
-
+
- + Subscription: FastAgency is offered on a subscription basis. You will be billed in advance on a + recurring and periodic basis (each period is referred to as a "billing cycle"). Billing cycles are set + either on a monthly or annual basis, depending on the type of subscription plan you select when + purchasing. + +
- + Payments: All payments are processed by our payment partner, Stripe. By providing a payment + method, you expressly authorize us and Stripe to charge the subscription fees at the start of every + billing cycle. + +
- + No Refunds: Payments are non-refundable and there are no refunds or credits for partially used + periods. Following any cancellation, however, you will continue to have access to your subscription + through the end of your current billing cycle. + +
- + Cancellation: You can cancel your subscription at any time. Please note that you must cancel your + subscription before it renews for a subsequent billing cycle in order to avoid being charged for the + next billing cycle. + +
- + Changes: We reserve the right to change our subscription plans or adjust pricing for our service + in any manner and at any time as we may determine in our sole and absolute discretion. + +
+
+ If you have any questions about your FastAgency subscription or these terms, please reach out to us at{' '} + + support@fastagency.ai + + . +
+Marketing Emails
++ By signing up or creating an account on this website, you agree to receive marketing emails from us, + unless you choose to unsubscribe. These emails may include promotional offers, product updates, + newsletters, or other information related to our services. We value your privacy and assure you that your + email address and personal information will be handled in accordance with our Privacy Policy. +
++
+ If you wish to unsubscribe from our marketing emails, you can do so by clicking the "unsubscribe" link + provided at the bottom of each email. Please note that even if you unsubscribe from marketing emails, you + may still receive transactional or account-related communications regarding your use of our services. +
+Confidentiality
++ "Confidential Information" means any information disclosed by either party to the other party that is + marked as confidential or should reasonably be considered confidential given the nature of the information + and the circumstances of its disclosure. +
++
+ The recipient of Confidential Information will maintain the confidentiality of the Confidential + Information and will not disclose it to any third party, except as necessary to provide the Service or as + required by law. +
+Termination
++ Either party may terminate these Terms upon written notice to the other party if the other party breaches + any material term of these Terms and fails to cure such breach within thirty (30) days of receiving + written notice of the breach. +
++
+ Upon termination of these Terms, you must immediately cease all use of the Service and destroy all copies + of the Service in your possession. +
+User Data
++ We will maintain certain data that you transmit to the Site for the purpose of managing the performance of + the Site, as well as data relating to your use of the Site. Although we perform regular routine backups of + data, you are solely responsible for all data that you transmit or that relates to any activity you have + undertaken using the Site. You agree that we shall have no liability to you for any loss or corruption of + any such data, and you hereby waive any right of action against us arising from any such loss or + corruption of such data. +
+Disclaimer of Warranties
++ The Service is provided "as is" and "as available" without any warranties of any kind, whether express or + implied. +
++
+ We do not warrant that the Service will be uninterrupted or error-free, or that the Service will meet your + requirements or expectations. +
++
+ We expressly disclaim any and all warranties of merchantability, fitness for a particular purpose, + non-infringement, and any warranties arising out of course of dealing or usage of trade. +
+Third-Party Website and Content
++ The Site may contain (or you may be sent via the Site) links to other websites ("Third-Party Websites") as + well as articles, photographs, text, graphics, pictures, designs, music, sound, video, information, + applications, software, and other content or items belonging to or originating from third parties + ("Third-Party Content"). Such Third-Party Websites and Third-Party Content are not investigated, + monitored, or checked for accuracy, appropriateness, or completeness by us, and we are not responsible for + any Third-Party Websites accessed through the Site or any Third-Party Content posted on, available + through, or installed from the Site, including the content, accuracy, offensiveness, opinions, + reliability, privacy practices, or other policies of or contained in the Third-Party Websites or the + Third-Party Content. Inclusion of, linking to, or permitting the use or installation of any Third-Party + Websites or any Third-Party Content does not imply approval or endorsement thereof by us. If you decide to + leave the Site and access the Third-Party Websites or to use or install any Third-Party Content, you do so + at your own risk, and you should be aware these Terms of Use no longer govern. You should review the + applicable terms and policies, including privacy and data gathering practices, of any website to which you + navigate from the Site or relating to any applications you use or install from the Site. Any purchases you + make through Third-Party Websites will be through other websites and from other companies, and we take no + responsibility whatsoever in relation to such purchases which are exclusively between you and the + applicable third party. You agree and acknowledge that we do not endorse the products or services offered + on Third-Party Websites and you shall hold us harmless from any harm caused by your purchase of such + products or services. Additionally, you shall hold us harmless from any losses sustained by you or harm + caused to you relating to or resulting in any way from any Third-Party Content or any contact with + Third-Party Websites. +
+Contact Us
++ In order to receive further information regarding use of the Site, please contact us at:{' '} + + support@fastagency.ai + + . +
+
+
+ Tutorials
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data.map((item, index) => (
+
+ handleCardClick(item.link)}
+ >
+
+
+
+ {item.heading}
+ {item.description}
+
+
+
+
+ ))}
+
+ {/* */}
+
+ );
+};
+
+export default ChatLayout;
diff --git a/app/src/client/app/layout/CustomAuthRequiredLayout.tsx b/app/src/client/app/layout/CustomAuthRequiredLayout.tsx
new file mode 100644
index 000000000..9028a4875
--- /dev/null
+++ b/app/src/client/app/layout/CustomAuthRequiredLayout.tsx
@@ -0,0 +1,25 @@
+import { useAuth } from 'wasp/client/auth';
+import { Redirect } from 'react-router-dom';
+
+import LoadingComponent from '../../components/LoadingComponent';
+
+const CustomAuthRequiredLayout = (Page: any) => {
+ return (props: any) => {
+ const { data: user, isError, isSuccess, isLoading } = useAuth();
+ if (isSuccess) {
+ if (user) {
+ return
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+
+
+
+ {/* */}
+ {currentChatDetails && currentChatDetails.selectedTeam ? (
+
+
+ {/* */}
+ {children}
+
+
+ {errorMessage.title}
+ {errorMessage.description && ': '}
+ {errorMessage.description}
+
+ )} */}
+ {successMessage && {successMessage} }
+
+ {(state === 'login' || state === 'signup') && (
+
+
+ );
+}
+
+export default Auth;
diff --git a/app/src/client/auth/LoginPage.tsx b/app/src/client/auth/LoginPage.tsx
new file mode 100644
index 000000000..95e8cafbc
--- /dev/null
+++ b/app/src/client/auth/LoginPage.tsx
@@ -0,0 +1,41 @@
+import { createTheme } from '@stitches/react';
+import { useAuth } from 'wasp/client/auth';
+import { useHistory } from 'react-router-dom';
+import { useEffect } from 'react';
+import { AuthWrapper } from './authWrapper';
+import Auth from './Auth';
+import imgUrl from '../static/logo.svg';
+
+export enum State {
+ Login = 'login',
+ Signup = 'signup',
+}
+
+export default function Login() {
+ const history = useHistory();
+
+ const { data: user } = useAuth();
+
+ useEffect(() => {
+ if (user) {
+ history.push('/');
+ }
+ }, [user, history]);
+
+ return (
+
+ {logo && }
+ {/* {title} */}
+
+
+ {/* {errorMessage && (
+ {state === 'signup' ? titles.signup : titles.login}
+
+
+ {loginFlow === State.Login ? "Don't have an account? " : 'Already have an account? '}
+
+ {loginFlow === State.Login ? 'Sign up' : 'Sign in'}
+
+
+
+
+ );
+};
diff --git a/app/src/client/auth/SignupPage.tsx b/app/src/client/auth/SignupPage.tsx
new file mode 100644
index 000000000..0281a55bc
--- /dev/null
+++ b/app/src/client/auth/SignupPage.tsx
@@ -0,0 +1,11 @@
+import { AuthWrapper } from './authWrapper';
+import imgUrl from '../static/logo.svg';
+import { State, LoginForm } from './LoginPage';
+
+export function Signup() {
+ return (
+
+
+ );
+}
diff --git a/app/src/client/auth/configs/config.ts b/app/src/client/auth/configs/config.ts
new file mode 100644
index 000000000..eece8428a
--- /dev/null
+++ b/app/src/client/auth/configs/config.ts
@@ -0,0 +1,11 @@
+export function stripTrailingSlash(url?: string): string | undefined {
+ return url?.replace(/\/$/, "");
+}
+
+const apiUrl = stripTrailingSlash(import.meta.env.REACT_APP_API_URL) || 'http://localhost:3001';
+
+const config = {
+ apiUrl,
+}
+
+export default config
diff --git a/app/src/client/auth/configs/stitches.config.js b/app/src/client/auth/configs/stitches.config.js
new file mode 100644
index 000000000..42b6377dd
--- /dev/null
+++ b/app/src/client/auth/configs/stitches.config.js
@@ -0,0 +1,30 @@
+import { createStitches } from "@stitches/react";
+
+export const { styled, css } = createStitches({
+ theme: {
+ colors: {
+ waspYellow: "#ffcc00",
+ gray700: "#a1a5ab",
+ gray600: "#d1d5db",
+ gray500: "gainsboro",
+ gray400: "#f0f0f0",
+ red: "#FED7D7",
+ darkRed: "#fa3838",
+ green: "#C6F6D5",
+
+ brand: "$waspYellow",
+ brandAccent: "#ffdb46",
+ errorBackground: "$red",
+ errorText: "#2D3748",
+ successBackground: "$green",
+ successText: "#2D3748",
+
+ submitButtonText: "black",
+
+ formErrorText: "$darkRed",
+ },
+ fontSizes: {
+ sm: "0.875rem",
+ },
+ },
+});
diff --git a/app/src/client/components/AgentConversationHistory.tsx b/app/src/client/components/AgentConversationHistory.tsx
new file mode 100644
index 000000000..fce09d7f9
--- /dev/null
+++ b/app/src/client/components/AgentConversationHistory.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import TerminalDisplay from './TerminalDisplay';
+
+interface AgentConversationHistoryProps {
+ agentConversationHistory: string;
+ initialState?: boolean;
+ isAgentWindow?: boolean;
+ isDeploymentInstructions?: boolean;
+ containerTitle?: string;
+}
+
+const AgentConversationHistory: React.FC
+
+
+
+ {children}
+
+
+ );
+};
+
+export default AgentConversationHistory;
diff --git a/app/src/client/components/AnimatedCharacterLoader.tsx b/app/src/client/components/AnimatedCharacterLoader.tsx
new file mode 100644
index 000000000..c1e8f8dac
--- /dev/null
+++ b/app/src/client/components/AnimatedCharacterLoader.tsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+
+import logo from '../static/logo.svg';
+
+interface AnimatedCharacterLoaderProps {
+ loadingMessage?: string; // Optional prop for customizing the loading message
+ bgColor?: string;
+ showLogo?: boolean;
+}
+
+const AnimatedCharacterLoader: React.FC
+
+
+
+ );
+};
+
+export default AnimatedCharacterLoader;
diff --git a/app/src/client/components/AppNavBar.tsx b/app/src/client/components/AppNavBar.tsx
new file mode 100644
index 000000000..aa33ba0e3
--- /dev/null
+++ b/app/src/client/components/AppNavBar.tsx
@@ -0,0 +1,140 @@
+import { Link } from 'wasp/client/router';
+import { useAuth } from 'wasp/client/auth';
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { BiLogIn } from 'react-icons/bi';
+import { AiFillCloseCircle } from 'react-icons/ai';
+import { HiBars3 } from 'react-icons/hi2';
+import logo from '../static/logo.svg';
+import DropdownUser from './DropdownUser';
+import { DOCS_URL, BLOG_URL } from '../../shared/constants';
+import UserActionButton from '../components/UserActionButton';
+import { UserMenuItems } from '../components/UserMenuItems';
+import { navigation } from '../landing-page/contentSections';
+import SocialMediaIcons from './SocialMediaIcons';
+
+const NavLogo = () =>
+ {showLogo && (
+
+
+
+
+
+ )}
+
+
+ {/* */}
+ {loadingMessage} {loadingAnimation[frameIndex]}
+ {/* */}
+
+
+ {children}
+
+ );
+};
+
+export default AutoScrollContainer;
diff --git a/app/src/client/components/Button.tsx b/app/src/client/components/Button.tsx
new file mode 100644
index 000000000..553042f0e
--- /dev/null
+++ b/app/src/client/components/Button.tsx
@@ -0,0 +1,20 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+interface ButtonProps {
+ onClick: MouseEventHandler
+
+
+ );
+}
diff --git a/app/src/client/components/ChatSidebar.tsx b/app/src/client/components/ChatSidebar.tsx
new file mode 100644
index 000000000..ee50d2303
--- /dev/null
+++ b/app/src/client/components/ChatSidebar.tsx
@@ -0,0 +1,216 @@
+import { type Chat } from 'wasp/entities';
+import { createNewChat, useQuery, getChats } from 'wasp/client/operations';
+import React, { useEffect, useRef, useState, MouseEventHandler } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
+import EditableChatName from './EditableChatName';
+import { updateCurrentChat } from 'wasp/client/operations';
+import { CreateNewChatProps } from '../interfaces/PlaygroundPageInterface';
+
+interface ChatSidebarProps {
+ sidebarOpen: boolean;
+ setSidebarOpen: (arg: boolean) => void;
+ refetchAllChatDetails: boolean;
+}
+
+const ChatSidebar = ({ sidebarOpen, setSidebarOpen, refetchAllChatDetails }: ChatSidebarProps) => {
+ const history = useHistory();
+ const location = useLocation();
+ const { pathname } = location;
+ const activeChat = pathname.split('/').pop();
+
+ const trigger = useRef
+ {conversations.map((conversation, idx) => {
+ const isUserConversation = conversation.role === 'user';
+ const conversationBgColor = isUserConversation ? 'airt-secondary' : 'airt-primary';
+ const conversationTextColor = isUserConversation ? 'airt-primary' : 'airt-font-base';
+ const conversationLogo = isUserConversation ? (
+
+ You
+
+ ) : (
+
+
+
+ );
+
+ return (
+
+ );
+}
diff --git a/app/src/client/components/CustomBreadcrumb.tsx b/app/src/client/components/CustomBreadcrumb.tsx
new file mode 100644
index 000000000..eb135a00e
--- /dev/null
+++ b/app/src/client/components/CustomBreadcrumb.tsx
@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+interface BreadcrumbProps {
+ pageName: string;
+}
+const CustomBreadcrumb = ({ pageName }: BreadcrumbProps) => {
+ return (
+
+ {conversation.isLoading ? (
+
+ );
+ })}
+ {currentChatDetails?.team_status === 'inprogress' && streamingAgentResponse && (
+
+
+ )}
+
+
+ {conversationLogo}
+
+ {conversation.agentConversationHistory && (
+
+
+ {currentChatDetails?.streamAgentResponse && !currentChatDetails?.team_id ? (
+ {conversation.message}
+ )}
+ {!currentChatDetails.isChatTerminated && !currentChatDetails.isExceptionOccured && (
+
+ )}
+
+ {idx !== lastConversationIdx && !isUserConversation && (
+
+
+
+
+ )}
+ {currentChatDetails.isExceptionOccured && (
+
+
+ )}
+
+ {conversation.message === '' ? 'Auto reply' : conversation.message}
+
+ )}
+
+ {isUserConversation && (
+
+
+ {conversation.message === ''
+ ? 'Auto reply'
+ : `
+
+ )}
+ ${conversation.message.replaceAll(
+ '\n',
+ '
'
+ )}
+
+ )}
+
+
+ );
+};
+
+export default CustomBreadcrumb;
diff --git a/app/src/client/components/CustomSidebar.tsx b/app/src/client/components/CustomSidebar.tsx
new file mode 100644
index 000000000..1f739758e
--- /dev/null
+++ b/app/src/client/components/CustomSidebar.tsx
@@ -0,0 +1,337 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import Logo from '../static/logo.svg';
+import { cn } from '../../shared/utils';
+
+interface NavLinkItem {
+ label: string;
+ svgIcon: React.ReactNode;
+ componentName: string;
+}
+
+export const navLinkItems: NavLinkItem[] = [
+ {
+ label: 'Secrets',
+ svgIcon: (
+
+ ),
+ componentName: 'secret',
+ },
+ {
+ label: 'LLMs',
+ svgIcon: (
+
+ ),
+ componentName: 'llm',
+ },
+ {
+ label: 'ToolBoxes',
+ svgIcon: (
+
+ ),
+ componentName: 'toolbox',
+ },
+ {
+ label: 'Agents',
+ svgIcon: (
+
+ ),
+ componentName: 'agent',
+ },
+ {
+ label: 'Teams',
+ svgIcon: (
+
+ ),
+ componentName: 'team',
+ },
+ {
+ label: 'Deployments',
+ svgIcon: (
+
+ ),
+ componentName: 'deployment',
+ },
+];
+
+interface SidebarProps {
+ sidebarOpen: boolean;
+ setSidebarOpen: (arg: boolean) => void;
+ onSideNavItemClick: (selectedItem: string) => void;
+ sideNavSelectedItem: string;
+}
+
+const CustomSidebar = ({ sidebarOpen, setSidebarOpen, onSideNavItemClick, sideNavSelectedItem }: SidebarProps) => {
+ const location = useLocation();
+ const { pathname } = location;
+
+ const trigger = useRef{pageName}
+ + {/* */} +
+
+
+ {/* */}
+
+ );
+};
+
+export default DropdownUser;
diff --git a/app/src/client/components/DynamicFormBuilder.tsx b/app/src/client/components/DynamicFormBuilder.tsx
new file mode 100644
index 000000000..61d64fd2f
--- /dev/null
+++ b/app/src/client/components/DynamicFormBuilder.tsx
@@ -0,0 +1,99 @@
+import React, { useRef } from 'react';
+import { useForm } from '../hooks/useForm';
+import { useFormSubmission } from '../hooks/useFormSubmission';
+import { usePropertyReferenceValues } from '../hooks/usePropertyReferenceValues';
+import { useDeploymentInstructions } from '../hooks/useDeploymentInstructions';
+import { useEscapeKeyHandler } from '../hooks/useEscapeKeyHandler';
+import Loader from '../admin/common/Loader';
+import NotificationBox from './NotificationBox';
+import { DynamicFormBuilderProps } from '../interfaces/DynamicFormBuilderInterface';
+import AgentConversationHistory from './AgentConversationHistory';
+import { DEPLOYMENT_PREREQUISITES } from '../utils/constants';
+import DynamicForm from './form/DynamicForm';
+
+const DynamicFormBuilder: React.FC
+
+
+
+ )}
+
+
+ )}
+ {notification.show && (
+
+ {!isEditing && (
+
+ {inputValue}
+
+ )}
+ {isEditing && (
+
+ )}
+ {!isEditing && (
+
+ )}
+
+ );
+};
+
+export default EditableChatName;
diff --git a/app/src/client/components/Footer.tsx b/app/src/client/components/Footer.tsx
new file mode 100644
index 000000000..98bd06a0d
--- /dev/null
+++ b/app/src/client/components/Footer.tsx
@@ -0,0 +1,66 @@
+import { footerNavigation } from '../landing-page/contentSections';
+import FooterMascot from '../static/robot-footer.svg';
+
+export default function Footer() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/app/src/client/components/FreeTrialButton.tsx b/app/src/client/components/FreeTrialButton.tsx
new file mode 100644
index 000000000..cafab48ee
--- /dev/null
+++ b/app/src/client/components/FreeTrialButton.tsx
@@ -0,0 +1,49 @@
+// import { useAuth } from 'wasp/client/auth';
+// import { stripePayment } from 'wasp/client/operations';
+
+// import { useState } from 'react';
+// import { useHistory } from 'react-router-dom';
+// import { TierIds } from '../../shared/constants';
+// import Button from './Button';
+
+// interface FreeTrialButtonProps {
+// theme?: 'light' | 'dark';
+// }
+
+// export default function FreeTrialButton({ theme = 'dark' }: FreeTrialButtonProps) {
+// const history = useHistory();
+// const [isLoading, setIsLoading] = useState
+ 
+
+