markprompt - npm Package Compare versions

Comparing version 0.1.1 to 0.1.3

dist/Markprompt.d.ts

 import { FC } from 'react';
+type OpenAIModel = OpenAIChatCompletionsModel | OpenAICompletionsModel;
+type OpenAIChatCompletionsModel = 'gpt-4' | 'gpt-4-0314' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-3.5-turbo' | 'gpt-3.5-turbo-0301';
+type OpenAICompletionsModel = 'text-davinci-003' | 'text-davinci-002' | 'text-curie-001' | 'text-babbage-001' | 'text-ada-001' | 'davinci' | 'curie' | 'babbage' | 'ada';
 type MarkpromptProps = {
+    model: OpenAIModel;
     projectKey: string;
@@ -9,5 +13,5 @@ iDontKnowMessage?: string;
     onDark?: boolean;
-    isReady?: boolean;
+    completionsUrl?: string;
 };
 export declare const Markprompt: FC<MarkpromptProps>;
 export default Markprompt;

dist/Markprompt.js

@@ -1,1 +0,1 @@
-import o,{useCallback as I,useEffect as P,useRef as C,useState as f}from"react";import A from"classnames";import J from"remark-gfm";import B from"react-markdown";const F="https://markprompt.com/completions",D="___START_RESPONSE_STREAM___",O=()=>o.createElement("span",{className:"caret animate-caret inline-block h-[15px] w-[8px] translate-y-[2px] translate-x-[2px] transform rounded-[1px] bg-fuchsia-500 shadow-[0_0px_3px_0px_rgba(217,70,219,0.9)]"}),t=({Component:l,children:h,...n})=>(l==="code"&&n.inline&&(n={...n,inline:"true"}),o.createElement(l,{...n,className:"markdown-node"},h,o.createElement(O,null))),G=({projectKey:l,iDontKnowMessage:h,placeholder:n,autoScrollDisabled:y,didCompleteFirstQuery:p,onDark:N})=>{const[d,L]=f(void 0),[r,i]=f(""),[g,k]=f([]),[s,v]=f(!1),b=C(null),x=C(null),S=C(!1),m=h||"Sorry, I am not sure how to answer that.",H=n||"Ask me anything...",K=I(async e=>{if(e.preventDefault(),!!d){i(""),k([]),v(!0);try{const a=await fetch(`${F}?projectKey=${l}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:d,iDontKnowMessage:m})});if(!a.ok||!a.body){const w=await a.text();console.error("Error:",w),i(m),v(!1);return}const z=a.body.getReader(),W=new TextDecoder;let _=!1,c="",E=!1,T=[];for(;!_;){const{value:w,done:$}=await z.read();_=$;const M=W.decode(w);if(E)i(u=>u+M);else if(c=c+M,c.includes(D)){const u=c.split(D);try{T=JSON.parse(u[0])}catch{}i(j=>j+u[1]),E=!0}}k(T)}catch(a){console.error("Error",a),i(m)}v(!1)}},[d,l,m]);return P(()=>{if(y||!b.current||!x.current)return;const e=x.current.getBoundingClientRect();b.current.scrollTop=e.bottom},[r,s,y,g]),P(()=>{!s&&r.length>0&&(S.current||(S.current=!0,p==null||p()))},[s,r,p]),o.createElement("div",{className:"relative flex h-full flex-col"},o.createElement("div",{className:"h-12 border-b border-neutral-900"},o.createElement("form",{onSubmit:K},o.createElement("input",{value:d||"",type:"text",onChange:e=>L(e.target.value),placeholder:H,className:"w-full appearance-none rounded-md border-0 bg-transparent px-0 pt-1 pb-2 outline-none placeholder:text-neutral-500 focus:outline-none focus:ring-0",autoComplete:"off",autoCorrect:"off",autoCapitalize:"none",spellCheck:"false",autoFocus:!0}))),o.createElement("div",{className:A("absolute inset-x-0 bottom-0 z-10 h-10 bg-gradient-to-t",{"from-neutral-1000 to-neutral-1000/0":!N,"from-neutral-1100 to-neutral-1100/0":N})}),o.createElement("div",{ref:b,className:"hidden-scrollbar prose prose-sm absolute inset-x-0 bottom-0 top-12 z-0 max-w-full overflow-y-auto scroll-smooth py-4 pb-8 dark:prose-invert"},s&&!(r.length>0)&&o.createElement(O,null),o.createElement("div",{className:A("prompt-answer",{"prompt-answer-done":!s,"prompt-answer-loading":s})},o.createElement(B,{components:{p:e=>o.createElement(t,{Component:"p",...e}),span:e=>o.createElement(t,{Component:"span",...e}),h1:e=>o.createElement(t,{Component:"h1",...e}),h2:e=>o.createElement(t,{Component:"h2",...e}),h3:e=>o.createElement(t,{Component:"h3",...e}),h4:e=>o.createElement(t,{Component:"h4",...e}),h5:e=>o.createElement(t,{Component:"h5",...e}),h6:e=>o.createElement(t,{Component:"h6",...e}),pre:e=>o.createElement(t,{Component:"pre",...e}),code:e=>o.createElement(t,{Component:"code",...e}),td:e=>o.createElement(t,{Component:"td",...e})},remarkPlugins:[J]},r)),r.length>0&&g.length>0&&o.createElement("div",{className:"mt-8 border-t border-neutral-900 pt-4 text-sm text-neutral-500"},o.createElement("div",{className:"animate-slide-up"},"Summary generated from the following sources:",o.createElement("div",{className:"mt-4 flex w-full flex-row flex-wrap items-center gap-2"},g.map(e=>o.createElement("div",{key:`reference-${e}`,className:"cursor-pointer rounded-md border border-neutral-900 bg-neutral-1100 px-2 py-1 text-sm font-medium text-neutral-300 transition hover:border-neutral-800 hover:text-neutral-200"},e))))),o.createElement("div",{className:"h-8"}),o.createElement("div",{ref:x})))};var R=G;export{G as Markprompt,R as default};
+import t,{useCallback as J,useEffect as T,useRef as w,useState as h}from"react";import P from"classnames";import U from"remark-gfm";import B from"react-markdown";const G="https://api.markprompt.com/completions",D="___START_RESPONSE_STREAM___",V="gpt-3.5-turbo",I=()=>t.createElement("span",{className:"caret animate-caret inline-block h-[15px] w-[8px] translate-y-[2px] translate-x-[2px] transform rounded-[1px] bg-fuchsia-500 shadow-[0_0px_3px_0px_rgba(217,70,219,0.9)]"}),o=({Component:l,children:i,...n})=>(l==="code"&&n.inline&&(n={...n,inline:"true"}),t.createElement(l,{...n,className:"markdown-node"},i,t.createElement(I,null))),q=({model:l,projectKey:i,iDontKnowMessage:n,placeholder:L,autoScrollDisabled:y,didCompleteFirstQuery:d,onDark:M,completionsUrl:k})=>{const[m,K]=h(void 0),[r,p]=h(""),[g,N]=h([]),[a,b]=h(!1),v=w(null),x=w(null),_=w(!1),c=n||"Sorry, I am not sure how to answer that.",H=L||"Ask me anything...",z=J(async e=>{if(e.preventDefault(),!!m){p(""),N([]),b(!0);try{const s=await fetch(`${k||G}?projectKey=${i}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:m,model:l||V,iDontKnowMessage:c})});if(!s.ok||!s.body){const C=await s.text();console.error("Error:",C),p(c),b(!1);return}const W=s.body.getReader(),$=new TextDecoder;let A=!1,u="",E=!1,O=[];for(;!A;){const{value:C,done:j}=await W.read();A=j;const S=$.decode(C);if(E)p(f=>f+S);else if(u=u+S,u.includes(D)){const f=u.split(D);try{O=JSON.parse(f[0])}catch{}p(F=>F+f[1]),E=!0}}N(O)}catch(s){console.error("Error",s),p(c)}b(!1)}},[m,k,i,c,l]);return T(()=>{if(y||!v.current||!x.current)return;const e=x.current.getBoundingClientRect();v.current.scrollTop=e.bottom},[r,a,y,g]),T(()=>{!a&&r.length>0&&(_.current||(_.current=!0,d==null||d()))},[a,r,d]),t.createElement("div",{className:"relative flex h-full flex-col"},t.createElement("div",{className:"h-12 border-b border-neutral-900"},t.createElement("form",{onSubmit:z},t.createElement("input",{value:m||"",type:"text",onChange:e=>K(e.target.value),placeholder:H,className:"w-full appearance-none rounded-md border-0 bg-transparent px-0 pt-1 pb-2 outline-none placeholder:text-neutral-500 focus:outline-none focus:ring-0",autoComplete:"off",autoCorrect:"off",autoCapitalize:"none",spellCheck:"false",autoFocus:!0}))),t.createElement("div",{className:P("absolute inset-x-0 bottom-0 z-10 h-10 bg-gradient-to-t",{"from-neutral-1000 to-neutral-1000/0":!M,"from-neutral-1100 to-neutral-1100/0":M})}),t.createElement("div",{ref:v,className:"hidden-scrollbar prose prose-sm absolute inset-x-0 bottom-0 top-12 z-0 max-w-full overflow-y-auto scroll-smooth py-4 pb-8 dark:prose-invert"},a&&!(r.length>0)&&t.createElement(I,null),t.createElement("div",{className:P("prompt-answer",{"prompt-answer-done":!a,"prompt-answer-loading":a})},t.createElement(B,{components:{p:e=>t.createElement(o,{Component:"p",...e}),span:e=>t.createElement(o,{Component:"span",...e}),h1:e=>t.createElement(o,{Component:"h1",...e}),h2:e=>t.createElement(o,{Component:"h2",...e}),h3:e=>t.createElement(o,{Component:"h3",...e}),h4:e=>t.createElement(o,{Component:"h4",...e}),h5:e=>t.createElement(o,{Component:"h5",...e}),h6:e=>t.createElement(o,{Component:"h6",...e}),pre:e=>t.createElement(o,{Component:"pre",...e}),code:e=>t.createElement(o,{Component:"code",...e}),td:e=>t.createElement(o,{Component:"td",...e})},remarkPlugins:[U]},r)),r.length>0&&g.length>0&&t.createElement("div",{className:"mt-8 border-t border-neutral-900 pt-4 text-sm text-neutral-500"},t.createElement("div",{className:"animate-slide-up"},"Summary generated from the following sources:",t.createElement("div",{className:"mt-4 flex w-full flex-row flex-wrap items-center gap-2"},g.map(e=>t.createElement("div",{key:`reference-${e}`,className:"cursor-pointer rounded-md border border-neutral-900 bg-neutral-1100 px-2 py-1 text-sm font-medium text-neutral-300 transition hover:border-neutral-800 hover:text-neutral-200"},e))))),t.createElement("div",{className:"h-8"}),t.createElement("div",{ref:x})))};var oe=q;export{q as Markprompt,oe as default};

package.json

 {
   "name": "markprompt",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A React component for adding GPT-4 powered search using the Markprompt API.",
@@ -41,3 +41,7 @@ "main": "dist/index.cjs",
   "devDependencies": {
+    "@swc/core": "^1.2.131",
+    "@swc/jest": "^0.2.17",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
+    "@types/node": "^14.14.22",
     "@types/react": "^17.0.43",
@@ -48,18 +52,16 @@ "@types/react-dom": "^17.0.14",
     "fast-glob": "^3.2.12",
+    "husky": "^4.3.8",
+    "jest": "26",
+    "lint-staged": "^12.2.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-markdown": "^8.0.6",
+    "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
     "snapshot-diff": "^0.8.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.9.5",
-    "@swc/core": "^1.2.131",
-    "@swc/jest": "^0.2.17",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@types/node": "^14.14.22",
-    "husky": "^4.3.8",
-    "jest": "26",
-    "lint-staged": "^12.2.1",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.4"
+    "typescript": "^4.9.5"
   },
@@ -66,0 +68,0 @@ "dependencies": {

README.md

@@ -17,17 +17,11 @@ # Markprompt React
 
-In [Motif](https://motif.land), paste the following in an MDX, JSX or TSX file:
+In [Motif](https://motif.land), paste the following import statement in an MDX, JSX or TSX file:
 
 ```jsx
 import { Markprompt } from 'https://esm.sh/markprompt';
-
-function MyPrompt() {
-  return <Markprompt project="<team-slug>/<project-slug>" />;
-}
 ```
 
-where `team-slug` and `project-slug` are the slugs for your team and project.
-
 If you have a Node-based setup, install the `markprompt` package via npm or yarn:
 
-```shell
+```sh
 # npm
@@ -48,6 +42,13 @@ npm install markprompt
 function MyPrompt() {
-  return <Markprompt project="<team-slug>/<project-slug>" />;
+  return <Markprompt projectKey="<project-key>" model="gpt-4" />;
 }
 ```
 
+where `project-key` can be obtained in your project settings, and `model` is the identifier of the OpenAI model to use for completions. Supported models are:
+
+- Chat completions: `gpt-4` `gpt-4-0314` `gpt-4-32k` `gpt-4-32k-0314` `gpt-3.5-turbo` `gpt-3.5-turbo-0301`
+- Completions: `text-davinci-003`, `text-davinci-002`, `text-curie-001`, `text-babbage-001`, `text-ada-001`, `davinci`, `curie`, `babbage`, `ada`
+
+If no model is specified, `gpt-3.5-turbo` will be used.
+
 ## Styling
@@ -61,6 +62,9 @@
 
-| Prop               | Default value                            | Description                                                     |
-| ------------------ | ---------------------------------------- | --------------------------------------------------------------- |
-| `iDontKnowMessage` | Sorry, I am not sure how to answer that. | Fallback message in can no answer is found.                     |
-| `placeholder`      | 'Ask me anything...'                     | Message to show in the input box when no text has been entered. |
+| Prop               | Default value                              | Description                                                                                                                                                                                                                                                                            |
+| ------------------ | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `projectKey`       |                                            | Your project&apos;s public API key, found in the project settings.                                                                                                                                                                                                                     |
+| `model`            | `gpt-3.5-turbo`                            | The OpenAI completions model to use. Supported values: `gpt-4`, `gpt-4-0314`, `gpt-4-32k`, `gpt-4-32k-0314`, `gpt-3.5-turbo`, `gpt-3.5-turbo-0301`, `text-davinci-003`, `text-davinci-002`, `text-curie-001`, `text-babbage-001`, `text-ada-001`, `davinci`, `curie`, `babbage`, `ada` |
+| settings.          |
+| `iDontKnowMessage` | _Sorry, I am not sure how to answer that._ | Fallback message in can no answer is found.                                                                                                                                                                                                                                            |
+| `placeholder`      | _Ask me anything..._                       | Message to show in the input box when no text has been entered.                                                                                                                                                                                                                        |
 
@@ -71,3 +75,4 @@ Example:
 <Markprompt
-  project="..."
+  projectKey="..."
+  model="..."
   iDontKnowMessage="Sorry, I don't know!"
@@ -87,3 +92,3 @@ placeholder="Ask Acme docs..."
 ```jsx
-<Markprompt token="<PROJECT_ACCESS_TOKEN>" />
+<Markprompt model="..." token="<PROJECT_ACCESS_TOKEN>" />
 ```
@@ -90,0 +95,0 @@

No alert changes

Improved metrics

Total package byte prevSize

615925

increased by13.75%

Lines of code

15249

increased by16.13%

Number of lines in readme file

109

increased by4.81%

Worsened metrics

Dev dependency count

24

increased by9.09%

No dependency changes