rename key attribute

js/apps/docs/components/Footer.vue

@@ -16,7 +16,11 @@ onMounted(() => {
 <template>
   <div class="flex justify-center items-center" v-if="loaded">
     <canary-styles framework="vitepress">
-      <canary-feedback-page key="pk_3nU5ydAaTWcoqbsuUNYoyqHa"></canary-feedback-page>
+      <canary-feedback-page
+        api-base="https://cloud.getcanary.dev"
+        api-key="pk_3nU5ydAaTWcoqbsuUNYoyqHa"
+      >
+      </canary-feedback-page>
     </canary-styles>
   </div>
 </template>

js/apps/docs/contents/docs/cloud/features/feedback.md

@@ -26,8 +26,8 @@ onMounted(() => {
   <div class="flex justify-center items-center" v-if="loaded">
     <canary-styles framework="vitepress">
       <canary-feedback-page
-        endpoint="https://cloud.getcanary.dev"
-        key="pk_xxxxxxxxxxxxx"
+        api-base="https://cloud.getcanary.dev"
+        api-key="pk_xxxxxxxxxxxxx"
       ></canary-feedback-page>
     </canary-styles>
   </div>

js/apps/docs/contents/docs/cloud/integrations/docusaurus.md

@@ -23,7 +23,7 @@ After ejecting, you can edit generated files in `src/theme/SearchBar`.
 ```html-vue
 <canary-root framework="docusaurus">
   <canary-provider-pagefind> // [!code --]
-    <canary-provider-cloud key="KEY" endpoint="https://cloud.getcanary.dev"> // [!code ++]
+    <canary-provider-cloud api-key="KEY" api-base="https://cloud.getcanary.dev"> // [!code ++]
       <!-- Rest of the code -->
     </canary-provider-cloud> // [!code ++]
   </canary-provider-pagefind> // [!code --]

js/apps/docs/contents/docs/cloud/integrations/starlight.md

@@ -31,7 +31,7 @@ export default defineConfig({
 ...
 <canary-root framework="starlight">
   <canary-provider-pagefind> // [!code --]
-    <canary-provider-cloud key="KEY" endpoint="https://cloud.getcanary.dev"> // [!code ++]
+    <canary-provider-cloud api-key="KEY" api-base="https://cloud.getcanary.dev"> // [!code ++]
       <!-- Rest of the code -->
     </canary-provider-cloud> // [!code ++]
   </canary-provider-pagefind> // [!code --]

js/apps/docs/contents/docs/cloud/integrations/vitepress.md

@@ -17,7 +17,7 @@ Take a look at our [CloudSearch.vue](https://github.com/fastrepl/canary/blob/mai
 ```html-vue
 <canary-root framework="vitepress">
   <canary-provider-vitepress-minisearch> // [!code --]
-    <canary-provider-cloud key="KEY" endpoint="https://cloud.getcanary.dev"> // [!code ++]
+    <canary-provider-cloud api-key="KEY" api-base="https://cloud.getcanary.dev"> // [!code ++]
       <!-- Rest of the code -->
     </canary-provider-cloud> // [!code ++]
   </canary-provider-vitepress-minisearch> // [!code --]

js/apps/docs/contents/docs/common/why.md

@@ -50,7 +50,7 @@ If you decide to use `Canary Cloud` for more features, you can easily migrate.
 ```html-vue
 <canary-root framework="docusaurus">
   <canary-provider-pagefind> // [!code --]
-  <canary-provider-cloud key="KEY" endpoint="https://cloud.getcanary.dev"> // [!code ++]
+  <canary-provider-cloud api-key="KEY" api-base="https://cloud.getcanary.dev"> // [!code ++]
     <!-- Rest of the code -->
   </canary-provider-cloud> // [!code ++]
   </canary-provider-pagefind> // [!code --]

js/apps/docs/contents/docs/local/intro.md

@@ -27,7 +27,7 @@ If you need more features, you can easily migrate.
 ```html-vue
 <canary-root framework="docusaurus">
   <canary-provider-pagefind> // [!code --]
-  <canary-provider-cloud key="KEY" endpoint="https://cloud.getcanary.dev"> // [!code ++]
+  <canary-provider-cloud api-key="KEY" api-base="https://cloud.getcanary.dev"> // [!code ++]
     <!-- Rest of the code -->
   </canary-provider-cloud> // [!code ++]
   </canary-provider-pagefind> // [!code --]

js/apps/docs/contents/index.examples.md

@@ -50,7 +50,7 @@
 ```js-vue [Using Canary cloud]
 <canary-root framework="docusaurus">
     <canary-provider-pagefind> // [!code --]
-        <canary-provider-cloud key="KEY" endpoint="https://cloud.getcanary.dev"> // [!code ++]
+        <canary-provider-cloud api-key="KEY" api-base="https://cloud.getcanary.dev"> // [!code ++]
             {/* Rest of the code */}
         </canary-provider-cloud> // [!code ++]
     </canary-provider-pagefind> // [!code --]

js/apps/docs/package.json

@@ -17,7 +17,7 @@
     "vue": "^3.4.35"
   },
   "dependencies": {
-    "@getcanary/web": "^0.0.83",
+    "@getcanary/web": "^0.0.84",
     "@vercel/analytics": "^1.3.1",
     "chart.js": "^4.4.3",
     "vue-chartjs": "^5.3.1"

js/packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcanary/web",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "type": "module",
   "main": "dist/components/index.js",
   "files": [

js/packages/web/src/components/canary-content.stories.ts

@@ -79,7 +79,7 @@ export default {
   parameters: { sourceLink: "components/canary-content.stories.ts" },
   render: ({ kind }: { kind: Kind }) => {
     const wrapper = (child: any) => html`
-      <canary-provider-cloud endpoint="http://localhost:6006" key="key">
+      <canary-provider-cloud api-endpoint="http://localhost:6006" api-key="key">
         <canary-content> ${child} </canary-content>
       </canary-provider-cloud>
     `;

js/packages/web/src/components/canary-feedback-page.ts

@@ -16,26 +16,18 @@ export class CanaryFeedbackPage extends LitElement {
   @property({ type: String, attribute: "text-complete" })
   completeText = "Got it, Thank you!";
 
-  @property({ type: String })
-  endpoint = "https://cloud.getcanary.dev";
+  @property({ type: String, attribute: "api-base" })
+  apiBase = "https://cloud.getcanary.dev";
 
-  @property({ type: String })
-  key = "";
-
-  connectedCallback(): void {
-    super.connectedCallback();
-
-    if (this.key === "") {
-      throw new Error("key is required");
-    }
-  }
+  @property({ type: String, attribute: "api-key" })
+  apiKey = "";
 
   private _task = new Task(this, {
-    task: async ([url, score]: [string, number], { signal }) => {
-      const response = await fetch(`${this.endpoint}/api/v1/feedback/page`, {
+    task: async ([endpoint, key, url, score]: [string, string, string, number], { signal }) => {
+      const response = await fetch(`${endpoint}/api/v1/feedback/page`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ key: this.key, url, score }),
+        body: JSON.stringify({ key, url, score }),
         signal: withTimeout(signal, 2500),
       });
 
@@ -78,8 +70,8 @@ export class CanaryFeedbackPage extends LitElement {
     `;
   }
 
-  private _handleClick(value: number) {
-    this._task.run([document.location.href, value]);
+  private _handleClick(score: number) {
+    this._task.run([this.apiBase, this.apiKey, document.location.href, score]);
   }
 
   static styles = [

js/packages/web/src/components/canary-feedback.stories.ts

@@ -14,7 +14,7 @@ export default {
   parameters: { sourceLink: "components/canary-feedback.stories.ts" },
   render: ({ type }: any) => {
     if (type === "page") {
-      return html` <canary-feedback-page key="123"></canary-feedback-page> `;
+      return html` <canary-feedback-page api-key="123"></canary-feedback-page> `;
     }
 
     if (type === "modal") {

js/packages/web/src/components/canary-modal.stories.ts

@@ -17,7 +17,7 @@ export default {
   parameters: { sourceLink: "components/canary-modal.stories.ts" },
   render: () => {
     return html`
-      <canary-provider-cloud key="key" endpoint="http://localhost:6006">
+      <canary-provider-cloud api-key="key" api-endpoint="http://localhost:6006">
         <canary-modal>
           <canary-trigger-searchbar slot="trigger"></canary-trigger-searchbar>
           <canary-content slot="content">

js/packages/web/src/components/canary-provider-cloud.ts

@@ -11,13 +11,16 @@ const NAME = "canary-provider-cloud";
 
 @customElement(NAME)
 export class CanaryProviderCloud extends LitElement {
-  @property() endpoint = "";
-  @property() key = "";
+  @property({ type: String, attribute: "api-base" })
+  apiBase = "";
+
+  @property({ type: String, attribute: "api-key" })
+  apiKey = "";
 
   connectedCallback() {
     super.connectedCallback();
 
-    if (!this.endpoint || !this.key) {
+    if (!this.apiBase || !this.apiKey) {
       throw new Error("Endpoint and key are required");
     }
 
@@ -42,11 +45,11 @@ export class CanaryProviderCloud extends LitElement {
     const params = {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ key: this.key, query }),
+      body: JSON.stringify({ key: this.apiKey, query }),
       signal,
     };
 
-    const res = await fetch(`${this.endpoint}/api/v1/search`, params);
+    const res = await fetch(`${this.apiBase}/api/v1/search`, params);
     if (!res.ok) {
       throw new Error(res.statusText);
     }
@@ -55,11 +58,11 @@ export class CanaryProviderCloud extends LitElement {
   };
 
   ask: AskFunction = async (id, query, handleDelta, signal) => {
-    const url = `${this.endpoint}/api/v1/ask`;
+    const url = `${this.apiBase}/api/v1/ask`;
     const params = {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ id, key: this.key, query }),
+      body: JSON.stringify({ id, key: this.apiKey, query }),
       signal,
     };