add InputPredict

.vscode/settings.json

@@ -24,6 +24,7 @@
     "landuse",
     "langchain",
     "Liban",
+    "lightbrown",
     "lightgreen",
     "lightpink",
     "lightyellow",

src/app/api/ai/inner/route.ts

@@ -11,9 +11,6 @@ export async function POST(request: Request) {
   const reqJson = await request.json();
   const pastMessagesJsonString = reqJson.pastMessages;
 
-  console.log("pastMessagesJsonString");
-  console.debug(pastMessagesJsonString);
-
   const chatHistoryLines = parsePastMessagesToLines(
     pastMessagesJsonString,
     true

src/app/api/ai/suggests/route.ts

@@ -13,9 +13,6 @@ export async function POST(request: Request) {
   const location = reqJson.location;
   const pastMessagesJsonString = reqJson.pastMessages;
 
-  console.log("pastMessagesJsonString");
-  console.debug(pastMessagesJsonString);
-
   const chatHistoryLines = parsePastMessagesToLines(
     pastMessagesJsonString,
     true
@@ -62,7 +59,8 @@ export async function POST(request: Request) {
   const result = await chain.call({ input });
 
   console.log("");
-  console.log("Suggests:\n", result.text);
+  console.log("Suggests:");
+  console.log(result.text);
   console.log("");
 
   console.log("----- end suggest -----");

src/app/api/ai/surface/route.ts

@@ -55,7 +55,8 @@ export async function POST(request: Request) {
   console.log("");
 
   const history = await memory.chatHistory.getMessages();
-  console.log(history);
+  // debug用
+  //console.log(history);
 
   console.log("----- end surface -----");
   console.log("----- ----- -----");

src/app/page.tsx

@@ -20,6 +20,8 @@ import { fitBoundsToGeoJson } from "@/utils/map/fitBoundsToGeoJson";
 import { parseInnerResJson } from "@/utils/trident/parseInnerResJson";
 import { LegalNotice } from "@/components/LegalNotice";
 import { InputSuggest } from "@/components/InputSuggest";
+import { InputPredict } from "@/components/InputPredict";
+import { LocationProvider } from "@/contexts/LocationContext";
 
 const greetings = {
   en: "Welcome! I'm TRIDENT, interactive Smart Maps assistant. Could you indicate me the areas and themes you want to see as the map?",
@@ -52,11 +54,11 @@ export default function Home() {
 
   // maps ref and state
   const mapRef = useRef<MapRef | null>(null);
-  const geolocationControlRef = useRef<GeolocateControlRef | null>(null);
   const [mapTitle, setMapTitle] = useState<string | undefined>(undefined);
   const [geojsonWithStyleList, setGeojsonWithStyleList] = useState<
     Array<{ id: string; style: TridentMapsStyle; geojson: FeatureCollection }>
   >([]);
+  const [location, setLocation] = useState<string | undefined>(undefined);
 
   // base maps style state
   const [mapStyleJsonUrl, setMapStyleJsonUrl] = useLocalStorage<string>(
@@ -135,6 +137,7 @@ export default function Home() {
 
       setInputText("");
       setResponding(true);
+      setMapping(true);
 
       insertNewDialogue({ who: "user", text: newInputText });
 
@@ -228,6 +231,7 @@ export default function Home() {
             });
             if (idx === linesWithAreaAndOrConcern.length - 1) {
               console.log("Finish!!!!!");
+              setMapping(false);
               insertNewDialogue(
                 {
                   who: "assistant",
@@ -238,7 +242,6 @@ export default function Home() {
                 },
                 false
               );
-              setMapping(false);
             }
           } else {
             if (retry) {
@@ -262,6 +265,7 @@ export default function Home() {
 
   const onSelectedSuggestions = useCallback(
     async (value: string) => {
+      setResponding(true);
       await onSubmit(value);
     },
     [onSubmit]
@@ -319,6 +323,8 @@ export default function Home() {
         fitBoundsToGeoJson(mapRef, everything, padding);
       } catch (error) {
         console.error(error);
+        setResponding(false);
+        setMapping(false);
       }
     }, 500);
   }, [geojsonWithStyleList, showingFloatingChat]);
@@ -410,9 +416,28 @@ export default function Home() {
                   </div>
                 );
               })}
-              {dialogueList.length === 1 && inputText.length === 0 && (
-                <InputSuggest onSelected={onSelectedSuggestions} />
-              )}
+              <LocationProvider locationInfo={{ location: location }}>
+                {dialogueList.length === 1 && inputText.length === 0 && (
+                  <InputSuggest
+                    onSelected={onSelectedSuggestions}
+                    onChangeLocation={(v) => {
+                      setLocation(v);
+                    }}
+                  />
+                )}
+                {pastMessages &&
+                  pastMessages.length > 1 &&
+                  !responding &&
+                  !mapping && (
+                    <InputPredict
+                      pastMessages={pastMessages}
+                      onUpdateSuggestions={() => {
+                        scrollToBottom();
+                      }}
+                      onSelected={onSelectedSuggestions}
+                    />
+                  )}
+              </LocationProvider>
               <div style={{ height: "1px" }} ref={dialogueEndRef} />
             </div>
             <TextInput

src/components/InputPredict/index.tsx

@@ -0,0 +1,64 @@
+import { LocationContext } from "@/contexts/LocationContext";
+import { DialogueElement } from "@/types/DialogueElement";
+import { nextPostJsonWithCache } from "@/utils/nextPostJson";
+import { useContext, useEffect, useState } from "react";
+
+import styles from "./styles.module.scss";
+
+export const InputPredict: React.FC<{
+  pastMessages?: any[];
+  onUpdateSuggestions?: () => void;
+  onSelected?: (value: string) => void;
+}> = ({ pastMessages, onUpdateSuggestions, onSelected }) => {
+  const locationInfo = useContext(LocationContext);
+  const [requesting, setRequesting] = useState(false);
+  const [suggests, setSuggests] = useState<string[] | undefined>(undefined);
+
+  useEffect(() => {
+    if (!pastMessages) {
+      return;
+    }
+    if (pastMessages.length === 0) {
+      return;
+    }
+    if (requesting) {
+      return;
+    }
+    const thisEffect = async () => {
+      setRequesting(true);
+      const resJson = await nextPostJsonWithCache("/api/ai/suggests", {
+        lang: window.navigator.language,
+        location: locationInfo.location,
+        pastMessages: JSON.stringify(pastMessages),
+      });
+      if (!resJson.suggests) {
+        return;
+      }
+      const newSuggests = resJson.suggests.split("\n");
+      setSuggests(newSuggests);
+      onUpdateSuggestions && onUpdateSuggestions();
+      setRequesting(false);
+    };
+    thisEffect();
+  }, [locationInfo, onUpdateSuggestions, pastMessages, requesting]);
+
+  return (
+    <>
+      <div className={styles.suggestListWrap}>
+        {suggests?.map((suggest) => {
+          return (
+            <button
+              className={styles.suggestListItem}
+              key={suggest}
+              onClick={() => {
+                onSelected && onSelected(suggest);
+              }}
+            >
+              {suggest}
+            </button>
+          );
+        })}
+      </div>
+    </>
+  );
+};

src/components/InputPredict/styles.module.scss

@@ -0,0 +1,12 @@
+.suggestListWrap {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: no-wrap;
+  gap: 2%;
+}
+
+.suggestListItem {
+  font-size: 0.8em;
+  margin-top: 12px;
+  padding: 6px;
+}

src/components/InputSuggest/SuggestByCurrentLocation/index.tsx

@@ -6,9 +6,10 @@ import styles from "./styles.module.scss";
 
 export const SuggestByCurrentLocation: React.FC<{
   coordinates: GeolocationCoordinates | null;
+  onChangeLocation?: (location: string) => void;
   onSelected?: (value: string) => void;
-}> = ({ coordinates, onSelected }) => {
-  const [address, setAddress] = useState<string | null>(null);
+}> = ({ coordinates, onChangeLocation, onSelected }) => {
+  const [location, setLocation] = useState<string | null>(null);
   const [suggests, setSuggests] = useState<string[]>([]);
 
   useEffect(() => {
@@ -27,15 +28,18 @@ export const SuggestByCurrentLocation: React.FC<{
         10
       );
       console.log("address", address);
-      const name = address.display_name;
-      setAddress(name);
+      const newLocation = address.display_name;
+      setLocation(newLocation);
+      if (onChangeLocation) {
+        onChangeLocation(newLocation);
+      }
       setSuggests([]);
     };
     thisEffect();
-  }, [coordinates]);
+  }, [coordinates, onChangeLocation]);
 
   useEffect(() => {
-    if (!address) {
+    if (!location) {
       return;
     }
     if (suggests.length > 0) {
@@ -44,7 +48,7 @@ export const SuggestByCurrentLocation: React.FC<{
     const thisEffect = async () => {
       const resJson = await nextPostJsonWithCache("/api/ai/suggests", {
         lang: window.navigator.language,
-        location: address,
+        location: location,
       });
       console.log(resJson.suggests);
       if (!resJson.suggests) {
@@ -54,11 +58,11 @@ export const SuggestByCurrentLocation: React.FC<{
       setSuggests(newSuggests);
     };
     thisEffect();
-  }, [address, suggests]);
+  }, [location, suggests]);
 
   return (
     <div className={styles.geolocationWrap}>
-      {address && <div className={styles.suggestAddress}>{address}</div>}
+      {location && <div className={styles.suggestAddress}>{location}</div>}
       {coordinates && suggests?.length > 0 && (
         <div className={styles.suggestListWrap}>
           {suggests.map((suggest) => (

src/components/InputSuggest/index.tsx

@@ -8,7 +8,8 @@ import { SuggestByTrend } from "./SuggestByTrend";
 
 export const InputSuggest: React.FC<{
   onSelected?: (value: string) => void;
-}> = ({ onSelected }) => {
+  onChangeLocation?: (location: string) => void;
+}> = ({ onSelected, onChangeLocation }) => {
   const [suggestMode, setSuggestMode] = useState<"location" | "trend" | null>(
     null
   );
@@ -46,6 +47,7 @@ export const InputSuggest: React.FC<{
         <SuggestByCurrentLocation
           coordinates={coordinates}
           onSelected={onSelected}
+          onChangeLocation={onChangeLocation}
         />
       )}
       {suggestMode === "trend" && <SuggestByTrend onSelected={onSelected} />}

src/contexts/LocationContext.tsx

@@ -0,0 +1,24 @@
+import React, { createContext } from "react";
+
+export type LocationInfo = {
+  location: string | undefined;
+};
+
+export const LocationContext = createContext<LocationInfo>({
+  location: undefined,
+});
+
+export const LocationProvider = ({
+  locationInfo,
+  children,
+}: {
+  locationInfo: LocationInfo;
+  children: React.ReactNode;
+}) => {
+  return (
+    <LocationContext.Provider value={locationInfo}>
+      {children}
+    </LocationContext.Provider>
+  );
+};
+

src/utils/langchain/chains/deep/prompt.ts

@@ -44,6 +44,12 @@ out geom;`,
     input: "Area: Tokyo",
     output: `[out:json][timeout:30000];
 relation["boundary"="administrative"]["admin_level"=4]["name:en"="Tokyo"];
+out geom;`,
+  },
+  {
+    input: "Area: Kanto region",
+    output: `[out:json][timeout:30000];
+relation["type"="boundary"]["name:en"="Kanto"];
 out geom;`,
   },
   {

src/utils/langchain/chains/inner/prompt.ts

@@ -231,6 +231,9 @@ EmojiForConcern: National treasure castles, 🏯
 ColorForConcern: National treasure castles, white
 EmojiForConcern: River, 🏞
 ColorForConcern: River, blue
+EmojiForConcern: Cafe, ☕️
+ColorForConcern: Cafe, brown
+Important note: lightbrown is not a Web Safe Color, so you must not use it.
 `;
 
 const tridentInnerPromptPrefix = `You are a conversation analysis assistant dedicated to generate web maps. You analyze the following conversation and accurately output map definition to instruct the Map Building Agent. Map definition MUST be enclosed by three backticks on new lines, denoting that it is a code block.