Updates the documentation

README.md

@@ -8,21 +8,31 @@ Instead of manually adding coordinates for each one of your markers, just click-
 
 👉 [Read more about the overall UX challenges](https://www.gsarigiannidis.gr/wordpress-gutenberg-map-block-openstreetmap/)
 
-![Demo GIF](.wordpress-org/screenshot-1.gif)
-
 👉 [The challenges of building a user-friendly place search for OpenStreetMap](https://www.gsarigiannidis.gr/openstreetmap-place-search/)
 
+👉 [Lessons learned from integrating OpenAI to a WordPress plugin](https://www.gsarigiannidis.gr/openstreetmap-openai-integration/)
+
+## Demos
+
+### The main functionality, with drag and drop pins and WYSIWYG editing
+![Demo GIF](.wordpress-org/screenshot-1.gif)
+
+### Using the location search
 ![Demo GIF](.wordpress-org/screenshot-2.gif)
 
-Drawing a polygon:
+### Drawing a polygon
 
 ![Demo GIF](.wordpress-org/screenshot-9.gif)
 
-Drawing a polyline:
+### Drawing a polyline
 
 ![Demo GIF](.wordpress-org/screenshot-10.gif)
 
-### Features
+### OpenAI integration in action:
+
+![Demo GIF](.wordpress-org/screenshot-12.gif)
+
+## Features
 
 * No need for API keys. Just install and use it.
 * Support for multiple markers.
@@ -31,6 +41,7 @@ Drawing a polyline:
 * [Dead-simple interface](https://www.gsarigiannidis.gr/wordpress-gutenberg-map-block-openstreetmap/). Don't search for coordinates and don't get overwhelmed by too many fields when using multiple markers. Just point and click on the map to add your marker where you want it and edit it's popup content directly from there.
 * [Place search](https://www.gsarigiannidis.gr/openstreetmap-place-search/). Find locations by typing keywords.
 * Remembers the zoom that you set when adding the markers and stores it so that you don't set it by hand (which you can do anyway if you prefer).
+* OpenAI integration which allows you to add markers by using commands in natural language. Just say "please" to activate (e.g. "Please, show me where GOT was filmed"). Requires an OpenAI API key. [Read more](https://www.gsarigiannidis.gr/openstreetmap-openai-integration/).
 * Adjust the map height.
 * Change the default marker icon with a custom one.
 * Enable or disable map dragging.
@@ -53,7 +64,7 @@ Drawing a polyline:
 
 No.
 
-That's the point actually. Just install the plugin and start adding maps.
+That's the point, actually. Just install the plugin and start adding maps. Keep in mind, though, that as stated on the [OpenStreetMap Tile Usage Policy](https://operations.osmfoundation.org/policies/tiles/), OSM’s own servers are run entirely on donated resources and they have strictly limited capacity. Using them on a site with low traffic will probably be fine. Nevertheless, you are advised to create an account to [MapBox](https://www.mapbox.com/) and get a free API Key.
 
 ### How do I add a new location?
 
@@ -67,6 +78,10 @@ Click on the marker to open up its popup. There, you will see the "Remove" butto
 
 Check under the "Map behavior" section, at the blocks' settings at the sidebar on the right. It's toggled off by default, that's probably why you missed it.
 
+### How does the OpenAI integration work?
+
+First of all, you will need to create an account to [OpenAI](https://openai.com/) and get an API key. Then, go to the plugin's settings page and paste your key there. After that, you can start adding markers by using commands in natural language. Just say "please" to activate (e.g. "Please, show me where GOT was filmed"). Please keep in mind, though, that it's like asking ChatGPT: the answers you get might not always be 100% reliable, and you should always double-check to confirm their accuracy. [Read more](https://www.gsarigiannidis.gr/openstreetmap-openai-integration/).
+
 ## Screenshots
 
 ![The map editing screen](.wordpress-org/screenshot-3.jpg)

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '993fe5ca1dd78d2bebf1');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'd14ede070655749920c9');

includes/classes/Assets.php

@@ -1,4 +1,4 @@
-<?php
+<?php /** @noinspection PhpComposerExtensionStubsInspection */
 /**
  * Assets
  *

includes/classes/Helper.php

@@ -1,4 +1,5 @@
-<?php
+<?php /** @noinspection PhpComposerExtensionStubsInspection */
+
 /**
  * Helper functions
  *

includes/classes/OpenAI.php

@@ -1,10 +1,17 @@
-<?php
+<?php /** @noinspection PhpComposerExtensionStubsInspection */
+
+/**
+ * OpenAI integration
+ *
+ * @since   2.5.0
+ * @package ootb-openstreetmap
+ */
 
 namespace OOTB;
 
 class OpenAI {
 	public string $url = 'https://api.openai.com/v1/chat/completions';
-	public string $context = "You are an application that helps users to find locations on a map. The user enters a question in the search box and you need to find the answer to it. You only reply with the location's name, the city and the country that it belongs to. If the answer is a city, then you only reply with the city and the country. If the answer is a country, then you only reply with the country's name. If the answer has multiple locations, then you should include all locations to your answer. Your replies should be in an array. For example, if the question is `Which are the two biggest cities of Greece?`, the answer should be [\"Athens, Greece\", \"Thessaloniki, Greece\"]. If the question is `What is the capital of Greece?`, the answer should be [\"Athens, Greece\"]. If the question is `Eiffel Tower', the answer should be '[Eiffel Tower, Paris, France]'. If the question cannot be answered by a list of locations, then you should reply with a message `invalid_question`.";
+	public string $context = "You are an application that helps users to find locations on a map. The user enters a question in the search box and you need to find the answer to it. You only reply with the location's name, the city and the country that it belongs to. If the answer is a city, then you only reply with the city and the country. If the answer is a country, then you only reply with the country's name. If the answer has multiple locations, then you should include all locations to your answer. Your replies should be in an array. For example, if the question is `Which are the two biggest cities of Greece?`, the answer should be [\"Athens, Greece\", \"Thessaloniki, Greece\"]. If the question is `What is the capital of Greece?`, the answer should be [\"Athens, Greece\"]. If the question is `Eiffel Tower', the answer should be '[\"Eiffel Tower, Paris, France\"]'. If the question cannot be answered by a list of locations, then you should reply with a message `invalid_question`.";
 
 	public function __construct() {
 		add_action( 'rest_api_init', [ $this, 'openai_rest_endpoint' ] );

includes/core.php

@@ -43,6 +43,7 @@ function i18n() {
  * through the block editor in the corresponding context.
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ * @noinspection PhpUnused
  */
 function openstreetmap_block_init() {
 	register_block_type( OOTB_PLUGIN_PATH . '/build' );

ootb-openstreetmap.php

@@ -5,7 +5,7 @@
  * Description:       A map block for the Gutenberg Editor using OpenStreetMaps and Leaflet that needs no API keys and works out of the box.
  * Requires at least: 5.8.6
  * Requires PHP:      7.4
- * Version:           2.4.1
+ * Version:           2.5.0
  * Author:            Giorgos Sarigiannidis
  * Author URI:        https://www.gsarigiannidis.gr
  * License:           GPL-2.0-or-later
@@ -21,7 +21,7 @@
 define( 'OOTB_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
 
 const OOTB_BLOCK_NAME     = 'ootb/openstreetmap';
-const OOTB_VERSION        = '2.4.1';
+const OOTB_VERSION        = '2.5.0';
 const OOTB_SCRIPT_VERSION = [
 	'leaflet'                  => '1.9.4',
 	'leaflet-gesture-handling' => '1.4.4',

readme.txt

@@ -32,6 +32,7 @@ Instead of manually adding coordinates for each one of your markers, just click-
 * [Dead-simple interface](https://www.gsarigiannidis.gr/wordpress-gutenberg-map-block-openstreetmap/). Don't search for coordinates and don't get overwhelmed by too many fields when using multiple markers. Just point and click on the map to add your marker where you want it and edit it's popup content directly from there.
 * [Place search](https://www.gsarigiannidis.gr/openstreetmap-place-search/). Find locations by typing keywords.
 * Remembers the zoom that you set when adding the markers and stores it so that you don't set it by hand (which you can do anyway if you prefer).
+* OpenAI integration which allows you to add markers by using commands in natural language. Just say "please" to activate (e.g. "Please, show me where GOT was filmed"). Requires an OpenAI API key. [Read more](https://www.gsarigiannidis.gr/openstreetmap-openai-integration/).
 * Adjust the map height.
 * Change the default marker icon with a custom one.
 * Enable or disable map dragging.
@@ -70,6 +71,10 @@ Click on the marker to open up its popup. There, you will see the "Remove" butto
 
 Check under the "Map behavior" section, at the blocks' settings at the sidebar on the right. It's toggled off by default, that's probably why you missed it.
 
+= How does the OpenAI integration work? =
+
+First of all, you will need to create an account to [OpenAI](https://openai.com/) and get an API key. Then, go to the plugin's settings page and paste your key there. After that, you can start adding markers by using commands in natural language. Just say "please" to activate (e.g. "Please, show me where GOT was filmed"). Please keep in mind, though, that it's like asking ChatGPT: the answers you get might not always be 100% reliable, and you should always double-check to confirm their accuracy. [Read more](https://www.gsarigiannidis.gr/openstreetmap-openai-integration/).
+
 == Screenshots ==
 
 1. Adding markers and rich content
@@ -83,8 +88,12 @@ Check under the "Map behavior" section, at the blocks' settings at the sidebar o
 9. Adding a polygon
 10. Adding a polyline
 11. Export and import locations
+12. Demonstrating the OpenAI integration
 
 == Upgrade Notice ==
+= 2.5.0 =
+Version 2.5.0 adds support for OpenAI integration which allows you to add markers by using commands in natural language. Just say "please" to activate (e.g. "Please, show me where GOT was filmed"). Requires an OpenAI API key.
+
 = 2.4.0 =
 Version 2.4.0 adds an option to prevent the default map scroll/touch behaviours to make it easier for users to navigate in a page (pretty much like in Google Maps).
 
@@ -103,6 +112,9 @@ Version 2.0.0 is a major, almost full, refactoring, both for the build scripts a
 = 1.0 =
 
 == Changelog ==
+= 2.5.0 =
+* [New] Adds OpenAI integration which allows you to add markers by using commands in natural language. Just say "please" to activate (e.g. "Please, show me where GOT was filmed"). Requires an OpenAI API key. [Read more](https://www.gsarigiannidis.gr/openstreetmap-openai-integration/).
+
 = 2.4.1 =
 * Updates the build scripts.
 * Updates compatibility with WordPress 6.4.

src/Elements/Alert.js

@@ -1,5 +1,5 @@
 // noinspection NpmUsedModulesInstalled
-import {__} from '@wordpress/i18n';
+import {__, sprintf} from '@wordpress/i18n';
 
 export default function Alert({props}) {
 	const {
@@ -20,7 +20,10 @@ export default function Alert({props}) {
 		} else if ('success' === openAImode) {
 			alert = __('Preparing the data. Please be patient...', 'ootb-openstreetmap');
 		} else if ('working' === openAImode) {
-			alert = __('Creating the markers. It will take a while, because we don\'t want to hit the Nominatim rate limits.', 'ootb-openstreetmap');
+			alert = sprintf(
+				__('Creating the markers. It will take a while, because we don\'t want to violate the <a href="%s">Nominatim usage policy</a>.', 'ootb-openstreetmap'),
+				'https://operations.osmfoundation.org/policies/nominatim/',
+			);
 			alertClass += ' alert-active';
 		} else if ('invalid_question' === openAImode) {
 			alert = __('I don\'t understand your question. Please try again.', 'ootb-openstreetmap');
@@ -32,6 +35,9 @@ export default function Alert({props}) {
 	}
 
 	return alert ?
-		<div className={alertClass}>{alert}</div>
+		<div
+			className={alertClass}
+			dangerouslySetInnerHTML={{__html: alert}}
+		></div>
 		: null;
 }

src/Elements/SearchBox.js

@@ -71,14 +71,19 @@ export default function SearchBox({props}) {
 		if (searchResults && searchResults.length > 0) {
 			return 'no';
 		} else if (openAImode.length) {
-			return 'admin-comments';
+			return 'format-status';
 		} else {
 			return 'search';
 		}
 	}
+
+	let searchBoxClass = "ootb-openstreetmap--searchbox";
+	if (openAImode.length) {
+		searchBoxClass += " openai-active";
+	}
 	return (
 		<Fragment>
-			<div className="ootb-openstreetmap--searchbox">
+			<div className={searchBoxClass}>
 				<TextControl
 					value={keywords}
 					onChange={onTyping}

src/index.css

@@ -53,7 +53,7 @@
 .ootb-openstreetmap--alert {
 	position: absolute;
 	bottom: 1em;
-	width: calc(100% - 2em);
+	width: calc(100% - 3em);
 	left: 1em;
 	border-radius: 5px;
 	font-size: 13px;
@@ -64,9 +64,14 @@
 	z-index: 9999;
 }
 
+.wp-block-ootb-openstreetmap div.ootb-openstreetmap--alert a {
+	color: #fff;
+}
+
 .ootb-openstreetmap--alert.alert-active {
 	background: rgba(23, 137, 7, 0.84);
 }
+
 .ootb-openstreetmap--alert.alert-error {
 	background: rgba(198, 0, 0, 0.84);
 }
@@ -144,6 +149,16 @@
 	box-shadow: none;
 }
 
+.ootb-openstreetmap--searchbox.openai-active {
+	border-color: #fff;
+	box-shadow: 1px 2px 3px #aaa;
+	border-radius: 1em;
+}
+
+.ootb-openstreetmap--searchbox.openai-active .dashicon.dashicons {
+	color: #2aa3c5;
+}
+
 .ootb-openstreetmap--searchbox svg.dashicon {
 	fill: #000;
 }