kepler.gl 3.1.7 → 3.1.8

package/src/ai-assistant/src/components/ai-assistant-component.tsx

@@ -5,7 +5,7 @@ import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
 import {textColorLT, theme} from '@kepler.gl/styles';
-import {MessageModel} from '@openassistant/core';
+import {MessageModel, useAssistant} from '@openassistant/core';
 import {AiAssistant} from '@openassistant/ui';
 import '@openassistant/echarts/dist/index.css';
 import '@openassistant/ui/dist/index.css';
@@ -57,17 +57,46 @@ export function AiAssistantComponent() {
 
   const [datasetMetaData, setDatasetMetaData] = useState<string>('');
 
-  // get dataset meta data
+  const [ideas, setIdeas] = useState<{title: string; description: string}[]>([]);
+
+  // get dataset meta data and re-initialize assistant when datasets or layers change
   useEffect(() => {
     const metaData = getDatasetContext(visState?.datasets, visState?.layers || []);
     setDatasetMetaData(metaData);
-    // re-initialize assistant when datasets or layers change
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visState?.datasets, visState?.layers]);
 
   // use dataset meta data in LLM instructions
   const instructions = `${INSTRUCTIONS}\n\n${datasetMetaData}`;
 
+  // generate ideas from LLM
+  const {temporaryPrompt} = useAssistant({...assistantProps, instructions});
+
+  const generateIdeas = async () => {
+    try {
+      const response = await temporaryPrompt({
+        prompt: PROMPT_IDEAS,
+        temperature: 1.0
+      });
+      // find [{},{}...] in the text and parse it as json, handling whitespace
+      const match = response?.match(/\[\s*\{.*\}\s*\]/s);
+      if (match) {
+        const json = JSON.parse(match[0]);
+        setIdeas(json);
+      }
+    } catch (error) {
+      console.error('Error generating ideas', error);
+    }
+  };
+
+  useEffect(() => {
+    // get ideas UI component
+    if (ideas.length === 0 && datasetMetaData.length > 0) {
+      generateIdeas();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasetMetaData]);
+
   const onRestartAssistant = () => {
     // clean up aiAssistant state
     dispatch(updateAiAssistantMessages([]));
@@ -105,7 +134,8 @@ export function AiAssistantComponent() {
         fontSize={'text-tiny'}
         botMessageClassName={''}
         githubIssueLink={'https://github.com/keplergl/kepler.gl/issues'}
-        ideas={PROMPT_IDEAS}
+        ideas={ideas}
+        onRefreshIdeas={generateIdeas}
       />
     </StyledAiAssistantComponent>
   );

package/src/ai-assistant/src/components/ai-assistant-config.tsx

@@ -11,7 +11,8 @@ import {
   RangeSliderFactory,
   Button,
   LoadingSpinner,
-  appInjector
+  appInjector,
+  Checkbox
 } from '@kepler.gl/components';
 import {State} from '../index';
 import ApiKey from '../icons/api-key';
@@ -58,6 +59,15 @@ const StyledAiAssistantConfig = styled.div`
   }
 `;
 
+// Ollama model input wrapper: checkbox + 'Input Model Name:' + input
+// all children element have width based on the content
+const OllamaModelInputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+`;
+
 const StyledWrapper = styled.div`
   display: flex;
   justify-content: space-between;
@@ -142,12 +152,14 @@ export function AiAssistantConfig() {
   const [topP, setTopP] = useLocalStorage('ai-assistant-top-p', aiAssistantConfig.topP || 1.0);
   const [baseUrl, setBaseUrl] = useLocalStorage(
     'ai-assistant-base-url',
-    aiAssistantConfig.baseUrl || 'http://localhost:11434'
+    aiAssistantConfig.baseUrl || 'http://localhost:11434/api'
   );
   const [mapboxToken, setMapboxToken] = useLocalStorage(
     'ai-assistant-mapbox-token',
     aiAssistantConfig.mapboxToken || ''
   );
+  const [ollamaModelInputChecked, setOllamaModelInputChecked] = useState(false);
+  const [ollamaModelInputValue, setOllamaModelInputValue] = useState('');
   const [connectionError, setConnectionError] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [isRunning, setIsRunning] = useState(false);
@@ -192,6 +204,19 @@ export function AiAssistantConfig() {
     setMapboxToken(e.target.value);
   };
 
+  const onOllamaModelInputChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOllamaModelInputChecked(e.target.checked);
+    if (!e.target.checked) {
+      // use model from selector
+      setModel('');
+    }
+  };
+
+  const onOllamaModelInputValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOllamaModelInputValue(e.target.value);
+    setModel(e.target.value);
+  };
+
   const onStartChat = async () => {
     setIsRunning(true);
     try {
@@ -261,21 +286,42 @@ export function AiAssistantConfig() {
           <FormattedMessage id="aiAssistantManager.llmModel.title" />
         </SectionTitle>
       </PanelLabelWrapper>
-      <StyledWrapper>
-        <StyledItemSelector
-          selectedItems={model}
-          options={PROVIDER_MODELS[provider]}
-          multiSelect={false}
-          disabled={false}
-          placeholder="Select LLM Model"
-          onChange={onLLMModelSelect}
-          filterOption="name"
-          getOptionValue={op => op}
-          displayOption={op => op}
-          searchable={false}
-          showArrow={true}
-        />
-      </StyledWrapper>
+      {((provider === 'ollama' && !ollamaModelInputChecked) || provider !== 'ollama') && (
+        <StyledWrapper>
+          <StyledItemSelector
+            selectedItems={model}
+            options={PROVIDER_MODELS[provider]}
+            multiSelect={false}
+            disabled={provider === 'ollama' ? ollamaModelInputChecked : false}
+            placeholder="Select LLM Model"
+            onChange={onLLMModelSelect}
+            filterOption="name"
+            getOptionValue={op => op}
+            displayOption={op => op}
+            searchable={false}
+            showArrow={true}
+          />
+        </StyledWrapper>
+      )}
+      {provider === 'ollama' && (
+        <OllamaModelInputWrapper>
+          <div style={{width: '250px'}}>
+            <Checkbox
+              id="ollama-model-input"
+              label="Input Model Name"
+              onChange={onOllamaModelInputChecked}
+              checked={ollamaModelInputChecked}
+            />
+          </div>
+          <Input
+            type="text"
+            onChange={onOllamaModelInputValueChange}
+            placeholder="Enter Model Name"
+            value={ollamaModelInputValue}
+            disabled={!ollamaModelInputChecked}
+          />
+        </OllamaModelInputWrapper>
+      )}
       {provider !== 'ollama' ? (
         <>
           <PanelLabelWrapper>
@@ -352,7 +398,7 @@ export function AiAssistantConfig() {
       </StyleSliderWrapper>
       <>
         <PanelLabelWrapper>
-          <SectionTitle>Mapbox Token (optional: route/isochrone)</SectionTitle>
+          <SectionTitle>Mapbox Token (optional for route/isochrone)</SectionTitle>
         </PanelLabelWrapper>
         <div className="api-key-input">
           <div className="api-key-input__icon">

package/src/ai-assistant/src/config/models.json

@@ -10,11 +10,11 @@
     "o1-mini"
   ],
   "google": [
-    "gemini-2.5-pro-exp-03-25",
+    "gemini-2.5-flash-preview-04-17",
+    "gemini-2.5-pro-preview-05-06",
     "gemini-2.0-flash",
     "gemini-1.5-flash",
-    "gemini-1.5-pro",
-    "gemini-1.0-pro"
+    "gemini-1.5-pro"
   ],
   "deepseek": ["deepseek-chat"],
   "anthropic": [
@@ -25,25 +25,6 @@
     "claude-3-sonnet",
     "claude-3-haiku"
   ],
-  "xai": [
-    "grok-3",
-    "grok-3-fast",
-    "grok-3-mini",
-    "grok-3-mini-fast"
-  ],
-  "ollama": [
-    "deepseek-coder",
-    "deepseek-coder:6.7b",
-    "deepseek-coder:33b",
-    "phi-2",
-    "qwen:14b",
-    "qwen:72b",
-    "llama2",
-    "llama2:70b",
-    "llava",
-    "mistral",
-    "gemma:2b",
-    "gemma:7b",
-    "phi-3"
-  ]
+  "xai": ["grok-3", "grok-3-fast", "grok-3-mini", "grok-3-mini-fast"],
+  "ollama": ["deepseek-r1", "gemma3", "llama4", "llama3.3", "mistral", "phi4", "qwen3", "qwen2.5"]
 }

package/src/ai-assistant/src/constants.ts

@@ -5,7 +5,7 @@ export const WELCOME_MESSAGE = `Hi, I am Kepler.gl AI Assistant!`;
 
 export const INSTRUCTIONS = `You are a Kepler.gl AI Assistant.
 Note:
-- Make a plan to answer the question before calling tools
+- IMPORTANT: make a plan if tools can be used to answer the question before calling tools
 - Add emojis to your responses to make them more engaging
 
 - For tool usage:
@@ -32,6 +32,12 @@ Note:
   3. For spatial joins:
      a. Use the points dataset as the first (left) dataset
      b. Explain the join operation and its purpose
+  4. For using road or line dataset in spatial analysis (e.g. local moran, spatial weights, and spatial join):
+     a. buffer the road by 1 meter first
+     b. save the buffered road as a new dataset
+     c. if needed, spatial join by buffered road (left) with points (right)
+     d. if needed, create a spatial weights using the buffered road
+     e. apply spatial analysis using the count in the result of spatial join
 
 - For spatial filtering:
   1. IMPORTANT: when use spatial filter to filter the points within polygons, please follow the steps:
@@ -45,32 +51,21 @@ Note:
   1. Please use the dataset name or dataset label as the datasetName argument, not the dataset id
 `;
 
-export const PROMPT_IDEAS = [
-  {
-    title: 'Data Insight',
-    description: 'What is the distribution of the variable?'
-  },
-  {
-    title: 'Spatial Analysis',
-    description: 'Is the variable spatially clustered?'
-  },
-  {
-    title: 'GeoTools',
-    description: 'How many events in California?'
-  },
-  {
-    title: 'Load Data',
-    description: 'load data from https://geodacenter.github.io/data-and-lab/data/lehd.geojson'
-  },
-  {
-    title: 'Create a Map Layer',
-    description: 'update its color inspired by Van Gogh Starry Night'
-  },
-  {
-    title: 'Change Basemap ',
-    description: 'use Positron style'
-  }
+export const PROMPT_IDEAS = `Return ONLY a JSON array of 5 ideas based on the tools in current context.
+IMPORTANT: please mention tool in a user-friendly title, and use actual field name in the description.
+Do not include any other text or explanation.
+Randomly pick 5 tools.
+Format:
+[{
+  "title": "Data Insight",
+  "description": "What is the distribution of HR60?"
+},
+{
+  "title": "Spatial Analysis",
+  "description": "Is HR60 spatially clustered?"
+},
 ];
+`;
 
 export const ASSISTANT_NAME = 'kepler-gl-ai-assistant';
 

package/src/ai-assistant/src/reducers/index.ts

@@ -28,7 +28,7 @@ const initialConfig: AiAssistantConfig = {
   provider: 'openai',
   model: 'gpt-4o',
   apiKey: '',
-  baseUrl: 'http://localhost:11434',
+  baseUrl: 'http://localhost:11434/api',
   temperature: 0.0,
   topP: 1.0
 };

package/src/ai-assistant/src/tools/geo-tools.tsx

@@ -23,7 +23,10 @@ import {
   dissolve,
   length,
   area,
-  perimeter
+  perimeter,
+  BufferTool,
+  CentroidTool,
+  DissolveTool
 } from '@openassistant/geoda';
 import {
   getUsStateGeojson,
@@ -35,7 +38,8 @@ import {
   isochrone,
   getCachedData,
   IsochroneTool,
-  RoutingTool
+  RoutingTool,
+  roads
 } from '@openassistant/osm';
 import {Datasets} from '@kepler.gl/table';
 import {Layer} from '@kepler.gl/layers';
@@ -155,6 +159,62 @@ export function getGeoTools(
     }
   };
 
+  const bufferTool: BufferTool = {
+    ...buffer,
+    context: {
+      ...buffer.context,
+      getGeometries
+    }
+  };
+
+  const centroidTool: CentroidTool = {
+    ...centroid,
+    context: {
+      ...centroid.context,
+      getGeometries
+    }
+  };
+
+  const dissolveTool: DissolveTool = {
+    ...dissolve,
+    context: {
+      ...dissolve.context,
+      getGeometries
+    }
+  };
+
+  const lengthTool = {
+    ...length,
+    context: {
+      ...length.context,
+      getGeometries
+    }
+  };
+
+  const areaTool = {
+    ...area,
+    context: {
+      ...area.context,
+      getGeometries
+    }
+  };
+
+  const perimeterTool = {
+    ...perimeter,
+    context: {
+      ...perimeter.context,
+      getGeometries
+    }
+  };
+
+  const roadsTool = {
+    ...roads,
+    context: {
+      ...roads.context,
+      getGeometries
+    }
+  };
+
   return {
     classifyTool,
     weightsTool,
@@ -163,19 +223,20 @@ export function getGeoTools(
     lisaTool,
     spatialJoinTool,
     spatialFilterTool,
-    buffer,
-    centroid,
-    dissolve,
-    length,
-    area,
-    perimeter,
+    bufferTool,
+    centroidTool,
+    dissolveTool,
+    lengthTool,
+    areaTool,
+    perimeterTool,
     getUsStateGeojson,
     getUsCountyGeojson,
     getUsZipcodeGeojson,
     queryUSZipcodes,
     geocoding,
     routing: routingTool,
-    isochrone: isochroneTool
+    isochrone: isochroneTool,
+    roads: roadsTool
   };
 }
 

package/src/ai-assistant/src/tools/lisa-tool.tsx

@@ -81,6 +81,7 @@ export function LisaToolComponent({
       for (let i = 0; i < colors.length; i++) {
         colorLegends[colors[i]] = labels[i];
       }
+      const colorMap = colors.map((color, index) => [index, color]);
       const newLayer = {
         id: layerId,
         type: layer.type,
@@ -93,17 +94,27 @@ export function LisaToolComponent({
           }, {}),
           colorScale: 'customOrdinal',
           colorField,
-          strokeColorField: null,
+          strokeColorDomain: colorDomain,
+          strokeColorField: colorField,
+          strokeColorScale: 'customOrdinal',
           visConfig: {
             ...layer.config.visConfig,
             colorRange: {
               ...layer.config.visConfig.colorRange,
               colorDomain,
-              colors: colors,
-              colorMap: colors.map((color, index) => [index, color]),
+              colors,
+              colorMap,
               colorLegends
             },
-            stroked: false
+            strokeColorRange: {
+              category: 'Custom',
+              name: 'custom',
+              colors,
+              colorMap
+            },
+            strokeOpacity: 1,
+            stroked: true,
+            strokedWidth: 0.5
           }
         }
       };

package/src/cloud-providers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kepler.gl/cloud-providers",
   "author": "Shan He <shan@uber.com>",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "kepler.gl constants used by kepler.gl components, actions and reducers",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
     "umd"
   ],
   "dependencies": {
-    "@kepler.gl/types": "3.1.7",
+    "@kepler.gl/types": "3.1.8",
     "react": "^18.2.0"
   },
   "nyc": {

package/src/common-utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kepler.gl/common-utils",
   "author": "Shan He <heshan0131@gmail.com>",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "kepler.gl common utils",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,8 +30,8 @@
     "umd"
   ],
   "dependencies": {
-    "@kepler.gl/constants": "3.1.7",
-    "@kepler.gl/types": "3.1.7",
+    "@kepler.gl/constants": "3.1.8",
+    "@kepler.gl/types": "3.1.8",
     "d3-array": "^2.8.0",
     "global": "^4.3.0",
     "h3-js": "^3.1.0",