Fix: Add crypto-js for the case of missing crypto.subtle in the browser

clients/js/examples/browser/app.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { ChromaClient } from "../../src/ChromaClient";
 import { Collection } from "../../src/types";
+import CryptoJS from "crypto-js";
 
 const SAMPLE_DOCUMENTS = [
   "apple",
@@ -14,7 +15,18 @@ const SAMPLE_DOCUMENTS = [
 const hashString = async (message: string) => {
   const encoder = new TextEncoder();
   const data = encoder.encode(message);
-  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  let hashBuffer;
+  if (crypto.subtle) {
+    hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  } else {
+    const hash = CryptoJS.SHA256(CryptoJS.enc.Utf8.parse(message));
+    hashBuffer = new Uint8Array(hash.words.map(word => [
+      (word >> 24) & 0xff,
+      (word >> 16) & 0xff,
+      (word >> 8) & 0xff,
+      word & 0xff
+    ]).flat());
+  }
   const hashArray = Array.from(new Uint8Array(hashBuffer));
   return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
 };

clients/js/examples/browser/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "chromadb": "link:../..",
+    "crypto-js": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

clients/js/examples/browser/vite.config.mjs

@@ -5,6 +5,7 @@ import react from "@vitejs/plugin-react";
 export default defineConfig({
   plugins: [react()],
   server: {
+    host: "0.0.0.0",
     port: 3000,
   },
   // This manual remapping is only needed because we're loading a locally linked version of the JS client