From 0f886e86cee15e8f67e83e2525e60a7c401df4f0 Mon Sep 17 00:00:00 2001
From: geroxima <geroshima123@gmail.com>
Date: Sat, 20 Jul 2024 11:38:01 -0400
Subject: [PATCH 1/6] feat: input form to enter the prompt, save the prompt in
 state

---
 src/App.css             |  4 ----
 src/App.jsx             |  7 +++++-
 src/components/Chat.jsx | 50 +++++++++++++++++++++++++++++++++++++++++
 src/components/Map.jsx  |  2 +-
 4 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Chat.jsx

diff --git a/src/App.css b/src/App.css
index f34bf09..6bc035c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,10 +3,6 @@
 @tailwind utilities;
 
 
-.map {
-    height: 60vh;
-}
-
 .loader-dots div {
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
diff --git a/src/App.jsx b/src/App.jsx
index f88af72..0e97aa1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,18 @@
 import { useState } from 'react'
 import MapComponent from './components/Map.jsx'
+import Chat from './components/Chat.jsx';
 
 const App = () => {
   let [places, setPlaces] = useState([]);
 
   return (
     <>
-      <div className="w-screen h-screen m-0 p-3 bg-slate-500">
+      <div className="w-full h-full m-0 p-3 bg-slate-50 flex">
         <MapComponent locations={places}/>
+        <Chat/>
+
+       
+
       </div>
     </>
   );
diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
new file mode 100644
index 0000000..ab1f80a
--- /dev/null
+++ b/src/components/Chat.jsx
@@ -0,0 +1,50 @@
+import { Textarea } from "@headlessui/react";
+import { useState } from "react";
+
+const Chat = () => {
+
+    const [prompt, setPrompt] = useState("");
+    const [messageSent, setMessageSent] = useState(false);
+
+    const handleChange = (e) => {
+        setPrompt(e.target.value);
+        setMessageSent(false);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log(prompt);
+        setPrompt("");
+        setMessageSent(true);
+
+    }
+
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e)
+        }
+    }
+
+    return (
+        <div className='w-1/5 flex flex-col justify-end'>
+            <section className="border border-slate-200 rounded-md mx-2">
+                <div className="p-2 my-5">
+                    {/* {prompt} */}
+                </div>
+                <form onSubmit={handleSubmit} className="flex items-center">
+                    <Textarea
+                        className='w-4/5 h-20 p-2'
+                        placeholder='Type a message...'
+                        value={prompt}
+                        onChange={handleChange}
+                        onKeyDown={handleKeyPress}
+                    />
+                    <button className='w-auto h-10 mx-auto' type='submit'><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.20308 1.04312C1.00481 0.954998 0.772341 1.0048 0.627577 1.16641C0.482813 1.32802 0.458794 1.56455 0.568117 1.75196L3.92115 7.50002L0.568117 13.2481C0.458794 13.4355 0.482813 13.672 0.627577 13.8336C0.772341 13.9952 1.00481 14.045 1.20308 13.9569L14.7031 7.95693C14.8836 7.87668 15 7.69762 15 7.50002C15 7.30243 14.8836 7.12337 14.7031 7.04312L1.20308 1.04312ZM4.84553 7.10002L2.21234 2.586L13.2689 7.50002L2.21234 12.414L4.84552 7.90002H9C9.22092 7.90002 9.4 7.72094 9.4 7.50002C9.4 7.27911 9.22092 7.10002 9 7.10002H4.84553Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button>
+                </form>
+            </section>
+        </div>
+    );
+  };
+
+  export default Chat;
\ No newline at end of file
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 91ee843..3fffcab 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -12,7 +12,7 @@ const center = {
 
 const MapComponent = ({locations=[]}) => {
     return (
-      <div className="map">
+      <div className="h-full w-4/5 rounded-md">
           <APIProvider
             apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
             onLoad={() => console.log("Maps API has loaded.")}

From 55f09c9286c3518248a2a6d11c727cf3a0ff1e2b Mon Sep 17 00:00:00 2001
From: MrChrisFabian <christopher.mendoza@fiuni.edu.py>
Date: Sat, 20 Jul 2024 11:40:17 -0400
Subject: [PATCH 2/6] feat: create ai implentation

---
 src/components/Map.jsx   | 182 ++++++++++++++++++++-------------------
 src/utils/modelConfig.js |  20 +++++
 2 files changed, 112 insertions(+), 90 deletions(-)
 create mode 100644 src/utils/modelConfig.js

diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 91ee843..f692b59 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -5,106 +5,108 @@ import { AdvancedMarker, APIProvider, Map, Pin, useMap } from '@vis.gl/react-goo
 import { MarkerClusterer } from '@googlemaps/markerclusterer'
 import { Circle } from './Circle.jsx'
 
+// import {main} from '../utils/modelConfig.js'
+
 const center = {
-    lat: -27.33056,
-    lng: -55.86667,
+  lat: -27.33056,
+  lng: -55.86667,
 };
 
-const MapComponent = ({locations=[]}) => {
-    return (
-      <div className="map">
-          <APIProvider
-            apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
-            onLoad={() => console.log("Maps API has loaded.")}
-          >
-              <Map
-                defaultZoom={13}
-                defaultCenter={center}
-                onCameraChanged={ev =>
-                  console.debug(
-                    "camera changed:",
-                    ev.detail.center,
-                    "zoom:",
-                    ev.detail.zoom
-                  )
-                }
-                mapId="da37f3254c6a6d1c"
-              >
-                  <PoiMarkers locations={locations}/>
-              </Map>
-          </APIProvider>
-      </div>
-    );
+const MapComponent = ({ locations = [] }) => {
+  return (
+    <div className="map">
+      <APIProvider
+        apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
+        onLoad={() => console.log("Maps API has loaded.")}
+      >
+        <Map
+          defaultZoom={13}
+          defaultCenter={center}
+          onCameraChanged={ev =>
+            console.debug(
+              "camera changed:",
+              ev.detail.center,
+              "zoom:",
+              ev.detail.zoom
+            )
+          }
+          mapId="da37f3254c6a6d1c"
+        >
+          <PoiMarkers locations={locations} />
+        </Map>
+      </APIProvider>
+    </div>
+  );
 }
 
-const PoiMarkers = ({locations=[]}) => {
-    const map = useMap()
-    const [markers, setMarkers] = useState({})
-    const clusterer = useRef(null)
-    const [circleCenter, setCircleCenter] = useState(null)
-    const handleClick = useCallback(ev => {
-        if (!map) return
-        if (!ev.latLng) return
-        map.panTo(ev.latLng)
-        setCircleCenter(ev.latLng)
-    })
-    // Initialize MarkerClusterer, if the map has changed
-    useEffect(() => {
-        if (!map) return
-        if (!clusterer.current) {
-            clusterer.current = new MarkerClusterer({ map })
-        }
-    }, [map])
+const PoiMarkers = ({ locations = [] }) => {
+  const map = useMap()
+  const [markers, setMarkers] = useState({})
+  const clusterer = useRef(null)
+  const [circleCenter, setCircleCenter] = useState(null)
+  const handleClick = useCallback(ev => {
+    if (!map) return
+    if (!ev.latLng) return
+    map.panTo(ev.latLng)
+    setCircleCenter(ev.latLng)
+  })
+  // Initialize MarkerClusterer, if the map has changed
+  useEffect(() => {
+    if (!map) return
+    if (!clusterer.current) {
+      clusterer.current = new MarkerClusterer({ map })
+    }
+  }, [map])
 
-    // Update markers, if the markers array has changed
-    useEffect(() => {
-        clusterer.current?.clearMarkers()
-        clusterer.current?.addMarkers(Object.values(markers))
-    }, [markers])
+  // Update markers, if the markers array has changed
+  useEffect(() => {
+    clusterer.current?.clearMarkers()
+    clusterer.current?.addMarkers(Object.values(markers))
+  }, [markers])
 
-    const setMarkerRef = (marker, key) => {
-        if (marker && markers[key]) return
-        if (!marker && !markers[key]) return
+  const setMarkerRef = (marker, key) => {
+    if (marker && markers[key]) return
+    if (!marker && !markers[key]) return
 
-        setMarkers(prev => {
-            if (marker) {
-                return { ...prev, [key]: marker }
-            } else {
-                const newMarkers = { ...prev }
-                delete newMarkers[key]
-                return newMarkers
-            }
-        })
-    }
+    setMarkers(prev => {
+      if (marker) {
+        return { ...prev, [key]: marker }
+      } else {
+        const newMarkers = { ...prev }
+        delete newMarkers[key]
+        return newMarkers
+      }
+    })
+  }
 
-    return (
-      <>
-          <Circle
-            radius={800}
-            center={circleCenter}
-            strokeColor={"#0c4cb3"}
-            strokeOpacity={1}
-            strokeWeight={3}
-            fillColor={"#3b82f6"}
-            fillOpacity={0.3}
+  return (
+    <>
+      <Circle
+        radius={800}
+        center={circleCenter}
+        strokeColor={"#0c4cb3"}
+        strokeOpacity={1}
+        strokeWeight={3}
+        fillColor={"#3b82f6"}
+        fillOpacity={0.3}
+      />
+      {locations.map(poi => (
+        <AdvancedMarker
+          title={poi.key}
+          key={poi.key}
+          position={poi.location}
+          clickable={true}
+          onClick={handleClick}
+        >
+          <Pin
+            background={'#FBBC04'}
+            glyphColor={'#1a70fd'}
+            borderColor={'#1a70fd'}
           />
-          {locations.map(poi => (
-            <AdvancedMarker
-              title={poi.key}
-              key={poi.key}
-              position={poi.location}
-              clickable={true}
-              onClick={handleClick}
-            >
-                <Pin
-                  background={'#FBBC04'}
-                  glyphColor={'#1a70fd'}
-                  borderColor={'#1a70fd'}
-                />
-            </AdvancedMarker>
-              ))}
-      </>
-    )
+        </AdvancedMarker>
+      ))}
+    </>
+  )
 }
 
 export default MapComponent;
\ No newline at end of file
diff --git a/src/utils/modelConfig.js b/src/utils/modelConfig.js
new file mode 100644
index 0000000..873ba9a
--- /dev/null
+++ b/src/utils/modelConfig.js
@@ -0,0 +1,20 @@
+import OpenAI from "openai";
+
+const openai = new OpenAI({ apiKey: 'sk-svcacct-0Z8ivqhEsAfF1sJD98sCT3BlbkFJAUBcdSsdaw958pmu8YWC', dangerouslyAllowBrowser: true });
+
+async function generateAi(prompt) {
+    const completion = await openai.chat.completions.create({
+        messages: [{ "role": "system", "content": "You are a helpful assistant from a tourist webpage in the world." },
+        { "role": "user", "content": "please use this format always for your responses in a json format: [{'name':'Circuito Comercial','type':'Turístico','location':{'lat':-27.3593327,'lng':-55.8489188},'description':'Zona baja de Encarnación, conocida por ser un punto de encuentro para turismo de compras.','address':'Zona baja de Encarnación'}, another one]  " },
+        { "role": "assistant", "content": "Sure i can do that" },
+        { "role": "user", "content": prompt }],
+        model: "gpt-4o-mini",
+        response_format: { type: "json_object" }
+    });
+    let respuesta = JSON.parse(completion.choices[0].message.content)
+    return (respuesta[Object.keys(respuesta)[0]]);
+}
+
+
+
+export default generateAi;
\ No newline at end of file

From cce9cfb7d1267d32be745d662ec354d393d87c18 Mon Sep 17 00:00:00 2001
From: MrChrisFabian <christopher.mendoza@fiuni.edu.py>
Date: Sat, 20 Jul 2024 11:41:27 -0400
Subject: [PATCH 3/6] fixing comptabilities issues

---
 src/utils/modelConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/modelConfig.js b/src/utils/modelConfig.js
index 873ba9a..919fbf0 100644
--- a/src/utils/modelConfig.js
+++ b/src/utils/modelConfig.js
@@ -1,6 +1,6 @@
 import OpenAI from "openai";
 
-const openai = new OpenAI({ apiKey: 'sk-svcacct-0Z8ivqhEsAfF1sJD98sCT3BlbkFJAUBcdSsdaw958pmu8YWC', dangerouslyAllowBrowser: true });
+// const openai = new OpenAI({ apiKey: 'sk-svcacct-0Z8ivqhEsAfF1sJD98sCT3BlbkFJAUBcdSsdaw958pmu8YWC', dangerouslyAllowBrowser: true });
 
 async function generateAi(prompt) {
     const completion = await openai.chat.completions.create({

From 0ec722b515cb9928bbd8d599d81b0aef8d0b519c Mon Sep 17 00:00:00 2001
From: MrChrisFabian <christopher.mendoza@fiuni.edu.py>
Date: Sat, 20 Jul 2024 11:48:45 -0400
Subject: [PATCH 4/6] fix

---
 src/components/Map.jsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index f41ba48..a0dee6b 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -38,6 +38,33 @@ const MapComponent = ({ locations = [] }) => {
       </APIProvider>
     </div>
   );
+=======
+const MapComponent = ({locations=[]}) => {
+    return (
+      <div className="h-full w-4/5 rounded-md">
+          <APIProvider
+            apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
+            onLoad={() => console.log("Maps API has loaded.")}
+          >
+              <Map
+                defaultZoom={13}
+                defaultCenter={center}
+                onCameraChanged={ev =>
+                  console.debug(
+                    "camera changed:",
+                    ev.detail.center,
+                    "zoom:",
+                    ev.detail.zoom
+                  )
+                }
+                mapId="da37f3254c6a6d1c"
+              >
+                  <PoiMarkers locations={locations}/>
+              </Map>
+          </APIProvider>
+      </div>
+    );
+>>>>>>> 0f886e86cee15e8f67e83e2525e60a7c401df4f0
 }
 
 const PoiMarkers = ({ locations = [] }) => {

From 13e398f10af2e9ac9f9b780bba65753662f9a0d2 Mon Sep 17 00:00:00 2001
From: MrChrisFabian <christopher.mendoza@fiuni.edu.py>
Date: Sat, 20 Jul 2024 11:56:36 -0400
Subject: [PATCH 5/6] feat:totally functional search engine

---
 src/App.jsx             |  7 ++-----
 src/components/Chat.jsx | 11 ++++++-----
 src/components/Map.jsx  | 28 ----------------------------
 3 files changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 0e97aa1..967e973 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,11 +8,8 @@ const App = () => {
   return (
     <>
       <div className="w-full h-full m-0 p-3 bg-slate-50 flex">
-        <MapComponent locations={places}/>
-        <Chat/>
-
-       
-
+        <MapComponent locations={places} />
+        <Chat setPlaces={setPlaces} />
       </div>
     </>
   );
diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
index ab1f80a..dd37f38 100644
--- a/src/components/Chat.jsx
+++ b/src/components/Chat.jsx
@@ -1,7 +1,8 @@
 import { Textarea } from "@headlessui/react";
 import { useState } from "react";
+import generateAi from '../utils/modelConfig.js';
 
-const Chat = () => {
+const Chat = ({ setPlaces }) => {
 
     const [prompt, setPrompt] = useState("");
     const [messageSent, setMessageSent] = useState(false);
@@ -11,12 +12,12 @@ const Chat = () => {
         setMessageSent(false);
     };
 
-    const handleSubmit = (e) => {
+    const handleSubmit = async (e) => {
         e.preventDefault();
         console.log(prompt);
         setPrompt("");
         setMessageSent(true);
-
+        setPlaces(await generateAi(prompt))
     }
 
     const handleKeyPress = (e) => {
@@ -45,6 +46,6 @@ const Chat = () => {
             </section>
         </div>
     );
-  };
+};
 
-  export default Chat;
\ No newline at end of file
+export default Chat;
\ No newline at end of file
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index a0dee6b..29b97e7 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -12,33 +12,6 @@ const center = {
   lng: -55.86667,
 };
 
-<<<<<<< HEAD
-const MapComponent = ({ locations = [] }) => {
-  return (
-    <div className="map">
-      <APIProvider
-        apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
-        onLoad={() => console.log("Maps API has loaded.")}
-      >
-        <Map
-          defaultZoom={13}
-          defaultCenter={center}
-          onCameraChanged={ev =>
-            console.debug(
-              "camera changed:",
-              ev.detail.center,
-              "zoom:",
-              ev.detail.zoom
-            )
-          }
-          mapId="da37f3254c6a6d1c"
-        >
-          <PoiMarkers locations={locations} />
-        </Map>
-      </APIProvider>
-    </div>
-  );
-=======
 const MapComponent = ({locations=[]}) => {
     return (
       <div className="h-full w-4/5 rounded-md">
@@ -64,7 +37,6 @@ const MapComponent = ({locations=[]}) => {
           </APIProvider>
       </div>
     );
->>>>>>> 0f886e86cee15e8f67e83e2525e60a7c401df4f0
 }
 
 const PoiMarkers = ({ locations = [] }) => {

From 29cffb7114c73c38a5fce12ddf9b54d2af2dced2 Mon Sep 17 00:00:00 2001
From: MrChrisFabian <christopher.mendoza@fiuni.edu.py>
Date: Sat, 20 Jul 2024 11:58:43 -0400
Subject: [PATCH 6/6] fix: secret exposed fix

---
 src/utils/modelConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/modelConfig.js b/src/utils/modelConfig.js
index 873ba9a..c65941b 100644
--- a/src/utils/modelConfig.js
+++ b/src/utils/modelConfig.js
@@ -1,6 +1,6 @@
 import OpenAI from "openai";
 
-const openai = new OpenAI({ apiKey: 'sk-svcacct-0Z8ivqhEsAfF1sJD98sCT3BlbkFJAUBcdSsdaw958pmu8YWC', dangerouslyAllowBrowser: true });
+const openai = new OpenAI({ apiKey: import.meta.env.VITE_OPENAI_API_KEY, dangerouslyAllowBrowser: true });
 
 async function generateAi(prompt) {
     const completion = await openai.chat.completions.create({