Merge pull request #11 from fac30/feat/chatbot

Feat/chatbot front end

README.md

@@ -73,4 +73,43 @@ This project is licensed under the Unlicense - see the LICENSE file for details.
 ### Acknowledgments:
 - **Font**: Inter by Google Fonts
 - **Icons**: Heroicons
+
+## Eco-Advice Page Configuration
+
+### Google Docs Integration
+
+The eco-advice articles are dynamically rendered from Google Docs. To set up new articles:
+
+1. Create your article in Google Docs
+2. Set sharing permissions:
+   - Click 'Share' in the top right
+   - Select 'Publish to web'
+   - Enable auto-republish option
+   - Copy the published URL
+
+### Article Component Setup
+
+Each article is rendered using the `parseDoc` function. To add or modify articles:
+
+1. Locate the article component in the codebase
+2. Find the `parseDoc` function
+3. Insert the published Google Docs URL:
+   ```javascript
+   parseDoc('YOUR_PUBLISHED_GOOGLE_DOC_URL_HERE')
+   ```
+
+### OpenAI Configuration
+
+The eco-advice page interfaces with OpenAI's API for additional functionality:
+
+1. Navigate to `utils/openai.js`
+2. On line 11, update the OpenAI endpoint URL:
+   ```javascript
+   const OPENAI_API_ENDPOINT = 'YOUR_OPENAI_ENDPOINT_URL'
+   ```
+
+### Important Notes
+
+- Ensure all Google Docs are set to auto-publish to maintain current content
+- Only use published sharing links from authorised product owners
 ```

package.json

@@ -15,8 +15,10 @@
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.1.5",
     "@react-aria/interactions": "^3.22.5",
+    "dotenv": "^16.4.7",
     "emailjs-com": "^3.2.0",
     "native-base": "^3.4.0",
+    "openai": "^4.76.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
@@ -33,6 +35,7 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@eslint/js": "^9.11.1",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.2",

src/components/CategoryMenu.tsx

@@ -1,13 +1,7 @@
 import { Box, Text, Pressable, Image, ScrollView, VStack, HStack } from "native-base";
 import { useState } from "react";
 import { categories } from "../data/categories";
-
-interface ClothingItem {
-  name: string;
-  image: string;
-  category: string;
-  subcategory: string;
-}
+import { ClothingItem } from "../utils/types";
 
 interface CategoryMenuProps {
   categories: typeof categories;
@@ -121,7 +115,6 @@ export default function CategoryMenu({ categories, onSelectItem }: CategoryMenuP
                 borderColor="primary.100"
                 borderRadius="md"
                 bg="primary.200"
-                _hover={{ opacity: 0.8 }}
               >
                 <Image
                   source={{ uri: item.image }}