(refactor): separate browser ready builds

extensions/react-widget/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "docsgpt",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "docsgpt",
-      "version": "0.4.7",
+      "version": "0.4.8",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/plugin-transform-flow-strip-types": "^7.23.3",

extensions/react-widget/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "docsgpt",
-  "version": "0.4.7",
+  "name": "docsgpt-react",
+  "version": "0.4.8",
   "private": false,
   "description": "DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.",
   "source": "./src/index.html",
@@ -11,18 +11,6 @@
     "dist",
     "package.json"
   ],
-  "targets": {
-    "modern": {
-      "engines": {
-        "browsers": "Chrome 80"
-      }
-    },
-    "legacy": {
-      "engines": {
-        "browsers": "> 0.5%, last 2 versions, not dead"
-      }
-    }
-  },
   "@parcel/resolver-default": {
     "packageExports": true
   },
@@ -30,9 +18,9 @@
     "styled-components": "^5"
   },
   "scripts": {
-    "build": "parcel build src/main.tsx --public-url ./",
+    "build": "parcel build src/browser.tsx --public-url ./",
     "build:react": "parcel build src/index.ts",
-   "serve": "parcel serve -p 3000",
+    "serve": "parcel serve -p 3000",
     "dev": "parcel -p 3000",
     "test": "jest",
     "lint": "eslint",

extensions/react-widget/src/browser.tsx

@@ -0,0 +1,22 @@
+//exports browser ready methods
+
+import { createRoot } from "react-dom/client";
+
+import { DocsGPTWidget } from './components/DocsGPTWidget';
+import { SearchBar } from './components/SearchBar';
+import React from "react";
+if (typeof window !== 'undefined') {
+  const renderWidget = (elementId: string, props = {}) => {
+    const root = createRoot(document.getElementById(elementId) as HTMLElement);
+    root.render(<DocsGPTWidget {...props} />);
+  };
+  const renderSearchBar = (elementId: string, props = {}) => {
+    const root = createRoot(document.getElementById(elementId) as HTMLElement);
+    root.render(<SearchBar {...props} />);
+  };
+  (window as any).renderDocsGPTWidget = renderWidget;
+
+  (window as any).renderSearchBar = renderSearchBar;
+}
+
+export { DocsGPTWidget, SearchBar };

extensions/react-widget/src/components/SearchBar.tsx

@@ -69,7 +69,6 @@ const SearchResults = styled.div`
     position: absolute;
     display: block;
     background-color: ${props => props.theme.primary.bg};
-    opacity: 90%;
     border: 1px solid rgba(0, 0, 0, .1);
     border-radius: 12px;
     padding: 8px;
@@ -287,7 +286,7 @@ export const SearchBar = ({
         debounceTimeout.current = setTimeout(() => {
             getSearchResults(input, apiKey, apiHost, abortController.signal)
                 .then((data) => setResults(data))
-                .catch((err) => console.log(err))
+                .catch((err) => !abortController.signal.aborted && console.log(err))
                 .finally(() => setLoading(false));
         }, 500);
 
@@ -340,10 +339,11 @@ export const SearchBar = ({
                                 </InfoButton>
                                 {!loading ?
                                     (results.length > 0 ?
-                                        results.map((res) => {
+                                        results.map((res, key) => {
                                             const containsSource = res.source !== 'local';
                                             return (
                                                 <ResultWrapper
+                                                    key={key}
                                                     onClick={() => {
                                                         if (!containsSource) return;
                                                         window.open(res.source, '_blank', 'noopener, noreferrer')

extensions/react-widget/src/index.ts

@@ -1,2 +1,3 @@
+//exports methods for React
 export {SearchBar} from "./components/SearchBar"
 export { DocsGPTWidget } from "./components/DocsGPTWidget";

extensions/react-widget/src/main.tsx

@@ -1,25 +1,7 @@
-
+//development
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
-import { DocsGPTWidget } from './components/DocsGPTWidget';
-import { SearchBar } from './components/SearchBar';
 import React from "react";
-if (typeof window !== 'undefined') {
-  const renderWidget = (elementId: string, props = {}) => {
-    const root = createRoot(document.getElementById(elementId) as HTMLElement);
-    root.render(<DocsGPTWidget {...props} />);
-  };
-  const renderSearchBar = (elementId: string, props = {}) => {
-    const root = createRoot(document.getElementById(elementId) as HTMLElement);
-    root.render(<SearchBar {...props} />);
-  };
-  (window as any).renderDocsGPTWidget = renderWidget;
-
-  (window as any).renderSearchBar = renderSearchBar;
-}
 const container = document.getElementById("app") as HTMLElement;
 const root = createRoot(container)
-root.render(<App />);
-
-export { DocsGPTWidget };
-export { SearchBar }
+root.render(<App />);