diff --git a/examples/rag-playground/index.html b/examples/rag-playground/index.html
index 48342ad..750277e 100644
--- a/examples/rag-playground/index.html
+++ b/examples/rag-playground/index.html
@@ -4,7 +4,7 @@
- Jay's App
+ MeMemo
diff --git a/examples/rag-playground/src/components/app/app.css b/examples/rag-playground/src/components/app/app.css
index 3a11cdb..d445b0d 100644
--- a/examples/rag-playground/src/components/app/app.css
+++ b/examples/rag-playground/src/components/app/app.css
@@ -11,6 +11,9 @@
}
.app-container {
- width: 900px;
+ width: min(1000px, 100vw - 50px);
height: 600px;
+ border-radius: 10px;
+ border: 1px solid var(--gray-400);
+ /* box-shadow: var(--shadow-border-light); */
}
diff --git a/examples/rag-playground/src/components/app/app.ts b/examples/rag-playground/src/components/app/app.ts
index f889835..5507850 100644
--- a/examples/rag-playground/src/components/app/app.ts
+++ b/examples/rag-playground/src/components/app/app.ts
@@ -2,7 +2,7 @@ import { LitElement, css, unsafeCSS, html, PropertyValues } from 'lit';
import { customElement, property, state, query } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import '../prompt-panel/prompt-panel';
+import '../playground/playground';
import componentCSS from './app.css?inline';
/**
@@ -48,7 +48,7 @@ export class MememoRagPlayground extends LitElement {
return html`
`;
diff --git a/examples/rag-playground/src/components/playground/playground.css b/examples/rag-playground/src/components/playground/playground.css
new file mode 100644
index 0000000..e2fb8bb
--- /dev/null
+++ b/examples/rag-playground/src/components/playground/playground.css
@@ -0,0 +1,284 @@
+.playground {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 20px;
+
+ position: relative;
+ display: grid;
+
+ grid-template-rows: auto 40px auto 30px min-content 40px auto;
+
+ grid-template-columns:
+ minmax(min-content, 300px)
+ 50px
+ minmax(min-content, 100px)
+ 60px
+ minmax(300px, 1fr);
+
+ --arrow-color: var(--gray-300);
+ --border-radius: 5px;
+ --block-shadow: 0px 0px 2px hsla(0, 0%, 0%, 0.1),
+ 0px 0px 6px hsla(0, 0%, 0%, 0.05);
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ position: relative;
+ z-index: 2;
+
+ background-color: white;
+ box-sizing: border-box;
+
+ &.container-input {
+ grid-row: 1 / 2;
+ grid-column: 1 / 2;
+ border-radius: var(--border-radius);
+ box-shadow: var(--block-shadow);
+ border: 1px solid hsla(0deg, 0%, 0%, 0.08);
+ }
+
+ &.container-search {
+ grid-row: 1 / 2;
+ grid-column: 3 / 4;
+ }
+
+ &.container-text {
+ grid-row: 1 / 8;
+ grid-column: 5 / 6;
+ width: 100%;
+ height: 100%;
+ border-radius: var(--border-radius);
+ box-shadow: var(--block-shadow);
+ border: 1px solid hsla(0deg, 0%, 0%, 0.08);
+ }
+
+ &.container-prompt {
+ grid-row: 3 / 4;
+ grid-column: 1 / 4;
+ border-radius: var(--border-radius);
+ box-shadow: var(--block-shadow);
+ border: 1px solid hsla(0deg, 0%, 0%, 0.08);
+ }
+
+ &.container-model {
+ grid-row: 5 / 6;
+ grid-column: 1 / 4;
+ }
+
+ &.container-output {
+ grid-row: 7 / 8;
+ grid-column: 1 / 4;
+ border-radius: var(--border-radius);
+ box-shadow: var(--block-shadow);
+ border: 1px solid hsla(0deg, 0%, 0%, 0.08);
+ }
+}
+
+.flow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ position: relative;
+
+ &.input-text {
+ grid-row: 1 / 2;
+ grid-column: 2 / 5;
+ }
+
+ &.input-prompt {
+ grid-row: 2 / 3;
+ grid-column: 1 / 2;
+ }
+
+ &.text-prompt {
+ grid-row: 3 / 4;
+ grid-column: 4 / 5;
+ transform: rotate(180deg);
+ }
+
+ &.prompt-output {
+ grid-row: 4 / 7;
+ grid-column: 1 / 4;
+ }
+}
+
+.horizontal-flow {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+
+ .background {
+ position: relative;
+ width: 100%;
+ height: 10px;
+
+ .line-loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ width: 100%;
+ height: 30px;
+ display: inline-block;
+ overflow: hidden;
+ z-index: 2;
+
+ &.hidden {
+ display: none;
+ }
+ }
+
+ .line-loader::after {
+ content: '';
+ width: 100px;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ hsla(0, 100%, 100%, 0) 0%,
+ hsla(0, 100%, 100%, 0) 10%,
+ hsla(0, 100%, 100%, 0.5) 50%,
+ hsla(0, 100%, 100%, 0) 90%,
+ hsla(0, 100%, 100%, 0) 100%
+ );
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-sizing: border-box;
+ animation: animate-loader 1500ms ease-out infinite;
+ }
+
+ @keyframes animate-loader {
+ 0% {
+ left: 0;
+ transform: translateX(-100%);
+ }
+ 100% {
+ left: 100%;
+ transform: translateX(0%);
+ }
+ }
+
+ .start-rectangle {
+ position: absolute;
+ left: 0px;
+ height: 100%;
+ width: calc(100% - 18px);
+ background-color: var(--arrow-color);
+ z-index: 1;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .end-triangle {
+ position: absolute;
+ right: 0px;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 1;
+
+ width: 0;
+ height: 0;
+ border-top: 15px solid transparent;
+ border-bottom: 15px solid transparent;
+ border-left: 20px solid var(--arrow-color);
+ }
+ }
+}
+
+.vertical-flow {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+
+ .background {
+ position: relative;
+ height: 100%;
+ width: 10px;
+
+ .line-loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ height: 100%;
+ width: 30px;
+ display: inline-block;
+ overflow: hidden;
+ z-index: 2;
+
+ &.hidden {
+ display: none;
+ }
+ }
+
+ .line-loader::after {
+ content: '';
+ height: 100px;
+ width: 100%;
+ background: linear-gradient(
+ 90deg,
+ hsla(0, 100%, 100%, 0) 0%,
+ hsla(0, 100%, 100%, 0) 10%,
+ hsla(0, 100%, 100%, 0.5) 50%,
+ hsla(0, 100%, 100%, 0) 90%,
+ hsla(0, 100%, 100%, 0) 100%
+ );
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-sizing: border-box;
+ animation: animate-loader 1500ms ease-out infinite;
+ }
+
+ @keyframes animate-loader {
+ 0% {
+ left: 0;
+ transform: translateX(-100%);
+ }
+ 100% {
+ left: 100%;
+ transform: translateX(0%);
+ }
+ }
+
+ .start-rectangle {
+ position: absolute;
+ left: 0px;
+ width: 100%;
+ height: calc(100% - 18px);
+ background-color: var(--arrow-color);
+ z-index: 1;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .end-triangle {
+ position: absolute;
+ left: 50%;
+ bottom: 0px;
+ transform: translateX(-50%);
+ z-index: 1;
+
+ width: 0;
+ height: 0;
+ border-left: 15px solid transparent;
+ border-right: 15px solid transparent;
+ border-top: 20px solid var(--arrow-color);
+ }
+ }
+}
diff --git a/examples/rag-playground/src/components/playground/playground.ts b/examples/rag-playground/src/components/playground/playground.ts
new file mode 100644
index 0000000..08887f4
--- /dev/null
+++ b/examples/rag-playground/src/components/playground/playground.ts
@@ -0,0 +1,102 @@
+import { LitElement, css, unsafeCSS, html, PropertyValues } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+import componentCSS from './playground.css?inline';
+
+/**
+ * Playground element.
+ *
+ */
+@customElement('mememo-playground')
+export class MememoPlayground extends LitElement {
+ //==========================================================================||
+ // Class Properties ||
+ //==========================================================================||
+
+ //==========================================================================||
+ // Lifecycle Methods ||
+ //==========================================================================||
+ constructor() {
+ super();
+ }
+
+ /**
+ * This method is called before new DOM is updated and rendered
+ * @param changedProperties Property that has been changed
+ */
+ willUpdate(changedProperties: PropertyValues) {}
+
+ //==========================================================================||
+ // Custom Methods ||
+ //==========================================================================||
+ async initData() {}
+
+ //==========================================================================||
+ // Event Handlers ||
+ //==========================================================================||
+
+ //==========================================================================||
+ // Private Helpers ||
+ //==========================================================================||
+
+ //==========================================================================||
+ // Templates and Styles ||
+ //==========================================================================||
+ render() {
+ return html`
+
+
Input
+
Search
+
Text
+
Prompt
+
Model
+
Output
+
+
+
+
+
+
+
+
+