@markprompt/web - npm Package Compare versions

Comparing version 0.3.1-beta4 to 0.3.2-beta1

dist/markprompt-content.d.ts

@@ -15,2 +15,3 @@ import { OpenAIModelId } from '@markprompt/core';
     iDontKnowMessage: string;
+    showReferencesImmediatebly: boolean;
     completionsUrl: string;
@@ -17,0 +18,0 @@ projectKey: string;

dist/markprompt-content.js

@@ -26,2 +26,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.iDontKnowMessage = I_DONT_KNOW_MESSAGE;
+        this.showReferencesImmediatebly = true;
         this.completionsUrl = MARKPROMPT_COMPLETIONS_URL;
@@ -58,2 +59,6 @@ this.projectKey = '';
     reset() {
+        const input = this.inputRef.value;
+        if (input) {
+            input.value = '';
+        }
         this.prompt = '';
@@ -65,4 +70,3 @@ this.answer = '';
     focus() {
-        const input = this.inputRef.value;
-        input?.focus();
+        this.inputRef.value?.focus();
     }
@@ -77,7 +81,7 @@ async onSubmit(event) {
         await submitPrompt(this.prompt, this.projectKey, (chunk) => {
-            this.scrollToBottom();
             this.answer += chunk;
+            setTimeout(() => this.scrollToBottom(), 50);
         }, (references) => {
-            this.scrollToBottom();
             this.references = references;
+            setTimeout(() => this.scrollToBottom(), 50);
         }, (error) => {
@@ -108,2 +112,5 @@ console.error(error);
     render() {
+        const shouldShowReferences = this.references.length > 0 &&
+            ((!this.loading && this.answer.length > 0) ||
+                this.showReferencesImmediatebly);
         return html `
@@ -143,23 +150,22 @@ <div class="root">
         <div class="gradient"></div>
-        <prose-block class="result" ${ref(this.resultRef)}>
-          <div class="answer">
-            ${this.loading && !(this.answer.length > 0)
+        <prose-block class="result">
+          <div class="stacked-result">
+            <div class="answer" ${ref(this.resultRef)}>
+              ${this.loading && !(this.answer.length > 0)
             ? html `<animated-caret class="caret"></animated-caret>`
             : nothing}
-            ${until(this.renderMarkdown(this.answer), nothing)}
-            ${this.loading && this.answer.length > 0
+              ${until(this.renderMarkdown(this.answer), nothing)}
+              ${this.loading && this.answer.length > 0
             ? html `<animated-caret class="caret"></animated-caret>`
             : nothing}
-          </div>
-          ${this.answer.length > 0 && this.references.length > 0
+            </div>
+            ${shouldShowReferences
             ? html `
-                <div class="references-container">
-                  <div
-                    class="${classMap({
-                'animate-slide-up': !this.loading,
-            })}"
-                  >
-                    <p>Generated from the following sources:</p>
-                    <div class="references">
-                      ${this.references.map((reference) => {
+                  <div class="references-container">
+                    <div class="animate-slide-up">
+                      <div style="margin-bottom: 0.5rem;">
+                        Generated from the following sources:
+                      </div>
+                      <div class="references">
+                        ${this.references.map((reference) => {
                 let refInfo = this.idToRefMap
@@ -173,18 +179,18 @@ ? this.idToRefMap[reference]
                     return html `<a
-                            href="${refInfo.href}"
-                            class="reference-item"
-                          >
-                            ${refInfo.label || reference}</a
-                          >`;
+                              href="${refInfo.href}"
+                              class="reference-item"
+                            >
+                              ${refInfo.label || reference}</a
+                            >`;
                 }
                 return html `<div class="reference-item">
-                          ${reference}
-                        </div>`;
+                            ${reference}
+                          </div>`;
             })}
+                      </div>
                     </div>
                   </div>
-                </div>
-              `
+                `
             : nothing}
-          <div class="spacer"></div>
+          </div>
         </prose-block>
@@ -262,3 +268,2 @@ </div>
       box-sizing: border-box;
-      border-top: 1px solid var(--border-color);
       background-color: var(--result-bg-color);
@@ -274,3 +279,2 @@ scrollbar-width: none;
       max-width: 100%;
-      overflow-y: auto;
       scroll-behavior: smooth;
@@ -283,4 +287,19 @@ }
 
+    .stacked-result {
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
     .answer {
-      padding: 2rem;
+      overflow-y: auto;
+      box-sizing: border-box;
+      flex-grow: 1 !important;
+      padding: 1rem;
       color: var(--text-color);
@@ -302,9 +321,7 @@ }
 
-    .spacer {
-      height: 2rem;
-    }
-
     .references-container {
+      flex: none;
+      box-sizing: border-box;
       border-top: 1px solid var(--border-color);
-      padding: 2rem;
+      padding: 1rem;
       font-size: 0.875rem;
@@ -347,2 +364,6 @@ line-height: 1.25rem;
 
+    .spacer {
+      height: 2rem;
+    }
+
     @keyframes slide-up {
@@ -376,2 +397,5 @@ from {
 __decorate([
+    property({ type: Boolean })
+], Markprompt.prototype, "showReferencesImmediatebly", void 0);
+__decorate([
     property({ type: String })
@@ -378,0 +402,0 @@ ], Markprompt.prototype, "completionsUrl", void 0);

package.json

 {
   "name": "@markprompt/web",
-  "version": "0.3.1-beta4",
+  "version": "0.3.2-beta1",
   "description": "A web component for adding GPT-4 powered search using the Markprompt API.",
@@ -16,3 +16,3 @@ "author": "Motif",
     "type": "git",
-    "url": "git+https://github.com/motifland/markprompt.git",
+    "url": "git+https://github.com/motifland/markprompt-js.git",
     "directory": "packages/web"
@@ -30,3 +30,3 @@ },
   "dependencies": {
-    "@markprompt/core": "^0.3.2",
+    "@markprompt/core": "0.4.0",
     "lit": "^2.7.2",
@@ -33,0 +33,0 @@ "rehype-sanitize": "^5.0.1",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

44515

decreased by-93.12%

Number of package files

10

decreased by-28.57%

Lines of code

1060

decreased by-93.57%

Dependency changes

• + Added@markprompt/core@0.4.0(transitive)

• - Removed@markprompt/core@0.3.2(transitive)

• Updated@markprompt/core@0.4.0