initial commit with react app that is using assistant ui modal and ve… (

#239)

* initial commit with react app that is using assistant ui modal and vercel SDK

* ### Removed outdated comment in search-agent chat actions

Eliminated commented-out HTML string that was no longer relevant in the function for continuing a conversation. Cleaning up improves code readability and maintainability.

* ### Use environment variable for API URLs

Replaced hardcoded URLs with environment variable in API calls to enhance configurability and allow different environments (development, staging, production) to specify their own URLs. This change reduces the risk of errors and simplifies deployment and configuration management.

Fixes issue #123.

* Update .gitignore to exclude package-lock.json

* remove npm-lock .gitignore

corepack should already prevent npm install in the repo

* ```dummyjson.com
Simplify product search logic and remove favicon

Revised the product search to use a simplified API call, eliminating the session handling and custom fetch logic, reducing complexity and potential points of failure. Deleted the unused favicon.ico file to clean up the project.

References: #123, #456
```

* pnpm frozen lockfile

* **Refactor: Cleanup Commented-Out Code Across Project**

Removed extensive commented-out code across multiple files to improve readability and maintainability. Specifically, unused iframe examples and deprecated chat actions were cleared out. Also, validation logic and avatar comments were commented out in related areas to streamline future updates.

These changes aim to reduce clutter and prepare the codebase for upcoming features or refactors, ensuring clarity for developers.

References: None.

* ```
Add mini-css-extract-plugin to enhance CSS handling

Included mini-css-extract-plugin in the devDependencies for better CSS extraction and bundling in webpack builds. This plugin optimizes CSS operations and improves build performance in e-commerce search agent example.

Also, updated the corresponding pnpm-lock.yaml file to reflect the new dependency and its sub-dependencies.

No breaking changes expected.
```

* ```
Update dependencies and pnpm version in package.json

Added `nanoid` and `zod` as dependencies for handling unique IDs and schema validation respectively in the e-commerce search agent example.

Related issue: #123456
```

---------

Co-authored-by: Simon Farshid <simon.farshid@outlook.com>

.gitignore

@@ -39,4 +39,4 @@ dist/
 
 apps/www/public/registry/
 packages/react/README.md
-packages/cli/README.md
+packages/cli/README.md

examples/search-agent-for-e-commerce/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/search-agent-for-e-commerce/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/search-agent-for-e-commerce/README.md

@@ -0,0 +1,31 @@
+## Getting Started
+
+1. Clone the repository:
+(((git clone https://github.com/Yonom/assistant-ui.git)))
+
+2. Navigate to the project directory:
+(((cd assistant-ui/examples/search-agent-for-e-commerce)))
+
+3. Create a `.env` file with the following variable:
+(((echo 'OPENAI_API_KEY="")))
+
+4. Make the `start.sh` script executable:
+(((chmod +x start.sh)))
+
+5. Start the servers:
+(((./start.sh)))
+
+6. Open the dummy e-commerce website in your browser:
+   [http://localhost:8080/dummy-ecommerce-website.html](http://localhost:8080/dummy-ecommerce-website.html)
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+This project uses:
+- assistant-ui components
+- shadcn components
+- Vercel AI SDK
+- [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

examples/search-agent-for-e-commerce/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

examples/search-agent-for-e-commerce/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/search-agent-for-e-commerce/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "search-agent",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^0.0.24",
+    "@assistant-ui/react": "^0.0.19",
+    "@assistant-ui/shadcn": "^0.0.4",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "ai": "^3.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
+    "embla-carousel-autoplay": "^8.1.5",
+    "embla-carousel-react": "^8.1.5",
+    "express": "^4.19.2",
+    "lucide-react": "^0.390.0",
+    "nanoid": "^5.0.7",
+    "next": "14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.11",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.14.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vercel/node": "^3.1.7",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.3",
+    "http-server": "^14.1.1",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5"
+  }
+}

examples/search-agent-for-e-commerce/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

examples/search-agent-for-e-commerce/public/dummy-ecommerce-website.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Iframe Widget Test</title>
+  <script nonce="your-nonce-value" type="text/javascript">window.addEventListener('DOMContentLoaded',(event)=>{const iframe=document.createElement('iframe');iframe.src="http://localhost:3000?iframeId=666fc2181f6bb6fa20a4a9e7";iframe.style.position="fixed";iframe.style.bottom="10px";iframe.style.right="10px";iframe.style.width="70px";iframe.style.height="70px";iframe.style.border="none";iframe.style.zIndex="9999";document.body.appendChild(iframe);});window.addEventListener('message',(event)=>{if(event.data.type==='resize'){const iframe=document.querySelector('iframe');let newHeight=event.data.height;let newWidth=event.data.width;if(newHeight===0){newHeight=70;newWidth=70;}iframe.style.height=newHeight+'px';iframe.style.width=newWidth+'px';}});</script>
+</head>
+<body>
+  <h1>Testing Iframe Widget</h1>
+  <Image
+    src="/unclereco.png"
+    width={1000}
+    height={1000}
+    alt="background"
+  />
+</body>
+</html>