images in package approach

Author: ElishaKay

frontend/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gpt-researcher-ui",
   "description": "GPT Researcher frontend as a React component",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -10,8 +10,7 @@
     "styles/*",
     "app/globals.css",
     "components/Settings/App.css",
-    "public/*",
-    "src/utils/injectFavicons.ts"
+    "src/assets/**/*"
   ],
   "private": false,
   "scripts": {
@@ -59,6 +58,7 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-url": "^8.0.2",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20",
     "@types/react": "^18",

frontend/nextjs/public/img/agents/academicResearchAgentAvatar.png

@@ -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 url from '@rollup/plugin-url';
 
 const removeUseClientPlugin = {
   name: 'remove-use-client',
@@ -46,6 +47,12 @@ export default {
     //     { find: '@', replacement: path.resolve(__dirname, 'src') }
     //   ]
     // }),
+    url({
+      // by default, rollup-plugin-url will include files up to 14kb
+      limit: 14336, // Optional: Customize the file size limit (in bytes)
+      include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif', '**/*.ico'],
+      publicPath: 'assets/'
+    }),
     resolve({
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       browser: true, // Ensures it only includes browser-compatible modules

frontend/nextjs/public/img/agents/businessAnalystAgentAvatar.png

@@ -14,6 +14,7 @@ import Footer from "../components/Footer";
 import InputArea from "../components/ResearchBlocks/elements/InputArea";
 import HumanFeedback from "../components/HumanFeedback";
 import LoadingDots from "../components/LoadingDots";
+import { injectFavicons } from './utils/injectFavicons';
 
 export interface GPTResearcherProps {
   apiUrl?: string;
@@ -51,6 +52,10 @@ export const GPTResearcher = ({
   const [showScrollButton, setShowScrollButton] = useState(false);
   const mainContentRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    injectFavicons();
+  }, []);
+
   // Update callback when results change
   useEffect(() => {
     if (onResultsChange && orderedData.length > 0) {