setup for fixing images and gptr_api_url for npm package

Author: ElishaKay

frontend/nextjs/README.md

@@ -1,6 +1,6 @@
 # GPT Researcher UI
 
-A React component library for integrating the GPT Researcher interface into your React applications.
+A React component library for integrating the GPT Researcher interface into your React applications. Take it for a test ride with the [GPTR React Starter Template](https://github.com/elishakay/gpt-researcher-react), or simply:
 
 ## Installation
 

frontend/nextjs/helpers/getHost.ts

@@ -5,8 +5,8 @@ interface GetHostParams {
 export const getHost = ({ purpose }: GetHostParams = {}): string => {
   if (typeof window !== 'undefined') {
     let { host } = window.location;
-    if (process.env.NEXT_PUBLIC_GPTR_API_URL) {
-      return process.env.NEXT_PUBLIC_GPTR_API_URL;
+    if (process.env.REACT_APP_GPTR_API_URL || process.env.NEXT_PUBLIC_GPTR_API_URL) {
+      return process.env.REACT_APP_GPTR_API_URL || process.env.NEXT_PUBLIC_GPTR_API_URL;
     } else if (purpose === 'langgraph-gui') {
       return host.includes('localhost') ? 'http%3A%2F%2F127.0.0.1%3A8123' : `https://${host}`;
     } else {

frontend/nextjs/package.json

@@ -1,17 +1,15 @@
 {
   "name": "gpt-researcher-ui",
   "description": "GPT Researcher frontend as a React component",
-  "version": "0.1.59",
+  "version": "0.1.62",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
     "styles/*",
     "app/globals.css",
-    "components/Settings/App.css",
-    "public/*",
-    "src/utils/injectFavicons.ts"
+    "components/Settings/App.css"
   ],
   "private": false,
   "scripts": {

frontend/nextjs/rollup.config.js

@@ -7,6 +7,7 @@ import json from '@rollup/plugin-json';
 import postcss from 'rollup-plugin-postcss';
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
+import imageTransformPlugin from './src/utils/imageTransformPlugin';
 
 const removeUseClientPlugin = {
   name: 'remove-use-client',
@@ -41,11 +42,7 @@ export default {
     }),
     json(), // Add this plugin to handle JSON files   
     removeUseClientPlugin,
-    // alias({
-    //   entries: [
-    //     { find: '@', replacement: path.resolve(__dirname, 'src') }
-    //   ]
-    // }),
+    imageTransformPlugin(),
     resolve({
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       browser: true, // Ensures it only includes browser-compatible modules

frontend/nextjs/src/GPTResearcher.tsx

@@ -24,7 +24,7 @@ export interface GPTResearcherProps {
 }
 
 export const GPTResearcher = ({
-  apiUrl = process.env.NEXT_PUBLIC_GPTR_API_URL || 'http://localhost:8000',
+  apiUrl = process.env.REACT_PUBLIC_GPTR_API_URL || process.env.NEXT_PUBLIC_GPTR_API_URL || 'http://localhost:8000',
   apiKey = '',
   defaultPrompt = '',
   onResultsChange,
@@ -51,6 +51,14 @@ export const GPTResearcher = ({
   const [showScrollButton, setShowScrollButton] = useState(false);
   const mainContentRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (apiUrl) {
+      // Update both environment variables when apiUrl prop changes
+      process.env.REACT_APP_GPTR_API_URL = apiUrl;
+      process.env.NEXT_PUBLIC_GPTR_API_URL = apiUrl;
+    }
+  }, [apiUrl]);
+
   // Update callback when results change
   useEffect(() => {
     if (onResultsChange && orderedData.length > 0) {

frontend/nextjs/src/components/GptResearcher.jsx

@@ -1,6 +1,5 @@
 // src/index.ts
 import { GPTResearcher } from './GPTResearcher';
-export { injectFavicons } from './utils/injectFavicons';
 
 export { GPTResearcher };
 export type { GPTResearcherProps } from './GPTResearcher';

frontend/nextjs/src/index.ts

@@ -0,0 +1,16 @@
+// rollup-image-transform-plugin.js
+export default function imageTransformPlugin() {
+    return {
+      name: 'image-transform',
+      transform(code) {
+        // Replace all relative image paths with absolute URLs
+        return code.replace(
+          /'img\/([^']+)'/g, 
+          "'https://gptr.app/img/$1'"
+        ).replace(
+          /"img\/([^"]+)"/g, 
+          '"https://gptr.app/img/$1"'
+        );
+      }
+    };
+  }