@plasius/chatbot 1.0.0

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@plasius/chatbot",
+  "version": "1.0.0",
+  "description": "OpenAI Chatbot",
+  "main": "./dist-cjs/index.js",
+  "types": "./dist/index.d.ts",
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "build": "tsc --build --listEmittedFiles && rsync -av --include '*/' --include '*.module.css' --exclude '*' src/ dist/ || true && npm run build:cjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:coverage:watch": "vitest --coverage",
+    "clean": "rimraf dist-cjs dist tsconfig.tsbuildinfo",
+    "reset:clean": "rm -rf node_modules package-lock.json && npm run clean",
+    "audit:ts": "tsc --noEmit --pretty",
+    "audit:eslint": "eslint \"{src,apps,packages}/**/*.{ts,tsx}\" --max-warnings=0 --ext .ts,.tsx",
+    "audit:deps": "depcheck --skip-missing=true",
+    "audit:npm": "npm audit --audit-level=moderate || true",
+    "audit:test": "vitest run --coverage",
+    "audit:all": "npm-run-all -l audit:ts audit:eslint audit:deps audit:npm audit:test",
+    "build:cjs": "tsc -p tsconfig.json --module commonjs --moduleResolution node --outDir dist-cjs --tsBuildInfoFile dist-cjs/tsconfig.tsbuildinfo --listEmittedFiles && rsync -av --include '*/' --include '*.module.css' --exclude '*' src/ dist-cjs/ || true",
+    "lint": "eslint .",
+    "prepare": "npm run build"
+  },
+  "author": "Plasius LTD <development@plasius.co.uk>",
+  "license": "MIT",
+  "dependencies": {
+    "@plasius/entity-manager": "^1.0.4",
+    "@plasius/error": "^1.0.0",
+    "@plasius/profile": "^1.0.0",
+    "@plasius/schema": "^1.0.0",
+    "emoji-picker-react": "^4.12.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-router-dom": "^7.6.2",
+    "react-icons": "^5.5.0"
+  },
+  "peerDependencies": {
+    "openai": "^5.19.1",
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.8",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "ajv": "^6.12.6",
+    "depcheck": "^1.4.7",
+    "eslint": "^9.33.0",
+    "npm-run-all": "^4.1.5",
+    "openai": "^5.19.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tsx": "^4.20.3",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "zod": "^4.1.5"
+  },
+  "overrides": {
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist-cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "./dist/index.js",
+  "files": [
+    "dist",
+    "dist-cjs",
+    "src",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "SECURITY.md",
+    "CODE_OF_CONDUCT.md",
+    "CONTRIBUTORS.md",
+    "docs",
+    "legal"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Plasius-LTD/chatbot.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Plasius-LTD/chatbot/issues"
+  },
+  "homepage": "https://github.com/Plasius-LTD/chatbot#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": [
+    {
+      "type": "patreon",
+      "url": "https://www.patreon.com/c/plasiusltd/membership"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/Plasius-LTD"
+    }
+  ],
+  "engines": {
+    "node": ">=22.12"
+  }
+}

package/src/chatbot.tsx

@@ -0,0 +1,306 @@
+import React, { lazy, Suspense, useState, useEffect } from "react";
+import type { EmojiClickData } from "emoji-picker-react";
+
+const EmojiPicker = lazy(() =>
+  import("emoji-picker-react/dist/emoji-picker-react.esm.js").then(
+    (module) => ({
+      default: module.EmojiPicker, // <--- force the correct component export
+    })
+  )
+);
+
+import { FaPaperPlane, FaSmile } from "react-icons/fa";
+
+import OpenAI from "openai";
+
+import styles from "./styles/chatbot.module.css"; // Import a CSS file for styling
+
+interface ChatBotProps {
+  openaiOrgID: string;
+  openaiProjectKey: string;
+  openaiAPIKey: string;
+}
+
+export default function ChatBot(
+  props: React.PropsWithChildren<ChatBotProps>
+): React.ReactElement {
+  const [messages, setMessages] = useState<
+    OpenAI.Chat.Completions.ChatCompletionMessageParam[]
+  >([]);
+  const [input, setInput] = useState<string>("");
+  const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
+
+  const openai = new OpenAI({
+    apiKey: props.openaiAPIKey,
+    project: props.openaiProjectKey,
+    organization: props.openaiOrgID,
+    dangerouslyAllowBrowser: true,
+  });
+
+  const chat = async (
+    msgs: OpenAI.Chat.Completions.ChatCompletionMessageParam[],
+    callback: (arg: OpenAI.Chat.Completions.ChatCompletionMessageParam) => void
+  ): Promise<void> => {
+    try {
+      const value = await openai.chat.completions.create({
+        model: "gpt-o1",
+        messages: msgs,
+      });
+      value.choices.forEach((choice: OpenAI.ChatCompletion.Choice) => {
+        callback({ content: choice.message.content ?? "", role: "system" });
+      });
+    } catch (err) {
+      console.error("chat() failed", err);
+    }
+  };
+
+  const objects = window.location.origin + "/api/objects/list";
+  const decorations = window.location.origin + "/api/decorations/list";
+  const locations = window.location.origin + "/api/locations/list";
+  const surfaces = window.location.origin + "/api/surfaces/list";
+
+  useEffect(() => {
+    void chat(
+      [
+        {
+          role: "system",
+          content: `You are a game designer, you are responsible for helping build the world and game mechanics, adjusting the game to be more fun for the player playing, 
+          using your knowledge of gameplay mechanics and world building you are going to help assign objects to the map.
+          
+          You can find the list of objects from the following url: ${objects}
+          You can find the list of decorations from the following url: ${decorations}
+          You can find the list of surfaces from the following url: ${surfaces}
+
+          Each location is a hexagon with a radius of 10 meters and 10m tall (allowing  for locations to be on top of each other!), and a q and r coordinate system.
+          The q coordinate is the horizontal axis, and the r coordinate is the vertical axis. The center of the hexagon is at (0, 0), 
+          and the corners are at (5, 8.66), (10, 0), (5, -8.66), (-5, -8.66), (-10, 0), and (-5, 8.66).
+          Adjacent hexagons are at (q + 1, r), (q - 1, r), (q, r + 1), (q, r - 1), (q + 1, r - 1), and (q - 1, r + 1) and you should try and 
+          coordinate over the hexagons to make sure the objects are placed in a way that makes sense.
+          
+          Try and align surfaces, decorations, and objects to a 1m size hexagon when placing items so they align to each other in the world, 
+          but avoid overlapping the objects with each other, unless they are meant to overlap (like a chair under a table, or a tree in a bush).
+          Surfaces should not overlap with each other, and should be placed in a way that makes sense for the location, 
+          such as a road should be continuous and have purpose, to or from somewhere, 
+          use the locations map to identify good roads, forests, mountains, lakes and oceans locations.
+          
+          for each prompt the user gives you, will relate to a specific location in the game world, you should take in the location, 
+          some basic information about the users expectations for the location and return a json object with the following fields:
+            {
+              "location": {
+                "r": "number", // 10m hexagon radius
+                "q": "number", // 10m hexagon radius
+                "elevation": "number",
+                "name": "string",
+                "description": "string",
+                "type": "string",
+              
+              "surfaces": [{
+                "location": {
+                  "q": "number", // 1m hexagon radius
+                  "r": "number", // 1m hexagon radius
+                  "elevation": "number"
+                },
+                "name": "string",
+                "type": "string",
+                "description": "string",
+                "url": "string",
+                "image": "string",
+                "rotation": "number",
+                "color": "string"
+              }],
+              "decorations": [
+                {
+                  "name": "string",
+                  "type": "string",
+                  "description": "string",
+                  "url": "string",
+                  "image": "string",
+                  "rotation": "number",
+                  "scale": "number",
+                  "color": "string",
+                  "location": {
+                    "x": "number",
+                    "y": "number",
+                    "z": "number"
+                  }
+                }
+              ],
+              "objects": [
+                {
+                  "name": "string",
+                  "type": "string",
+                  "description": "string",
+                  "url": "string",
+                  "image": "string",
+                  "rotation": "number",
+                  "scale": "number",
+                  "color": "string",
+                  "location": {
+                    "x": "number",
+                    "y": "number",
+                    "z": "number"
+                  }
+                }
+              ]
+            }
+          }
+
+          You can find the list of populated locations from the following url: ${locations} for reference and to allow you to be more creative in your assignments. 
+          If your current location is in the list, then take the current objects and decorations into account when placing the new objects, and remove or replace the old ones.`,
+        },
+      ],
+      (arg: OpenAI.Chat.Completions.ChatCompletionMessageParam) => {
+        setMessages((prev) => [...prev, arg]);
+      }
+    );
+  }, []);
+
+  const handleSend = async (): Promise<void> => {
+    if (input.trim()) {
+      setMessages((prev) => [...prev, { content: input, role: "user" }]);
+      setInput("");
+      setShowEmojiPicker(false);
+
+      try {
+        const value = await openai.chat.completions.create({
+          model: "gpt-4o-mini",
+          messages: [{ content: input, role: "user" }],
+        });
+        value.choices.forEach((choice: OpenAI.ChatCompletion.Choice) => {
+          setMessages((prev) => [
+            ...prev,
+            { content: choice.message.content ?? "", role: "system" },
+          ]);
+        });
+      } catch (err) {
+        console.error("handleSend() failed", err);
+      }
+    }
+  };
+
+  const handleEmojiClick = (emojiData: EmojiClickData): void => {
+    setInput((prev) => prev + (emojiData.emoji ?? ""));
+  };
+
+  const contentToString = (
+    content: OpenAI.Chat.Completions.ChatCompletionMessageParam["content"]
+  ): string => {
+    if (typeof content === "string" || content == null) return content ?? "";
+    if (Array.isArray(content)) {
+      return content
+        .map((part: unknown) => {
+          if (typeof part === "string") return part;
+          if (
+            typeof part === "object" &&
+            part !== null &&
+            Object.prototype.hasOwnProperty.call(part, "text")
+          ) {
+            const text = (part as Record<string, unknown>).text;
+            return typeof text === "string" ? text : "";
+          }
+          return "";
+        })
+        .join("");
+    }
+    return "";
+  };
+
+  return (
+    <div className={styles.chatbotcontainer}>
+      <div className={styles.messagesbox}>
+        {messages.map((msg, index) => (
+          <div key={index} className={styles.message + ` ${styles[msg.role]}`}>
+            <div className={styles.bubble}>{contentToString(msg.content)}</div>
+          </div>
+        ))}
+      </div>
+      <div className={styles.inputbox}>
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyUp={async (e) => {
+            if (e.key === "Enter" && e.shiftKey === false) {
+              await handleSend();
+              e.stopPropagation();
+            }
+          }}
+          placeholder="Type a message..."
+        />
+        <FaSmile
+          onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+          className={styles.emojiicon}
+        />
+        {showEmojiPicker && (
+          <Suspense fallback={<div>Loading emoji picker...</div>}>
+            <EmojiPicker onEmojiClick={handleEmojiClick} />
+          </Suspense>
+        )}
+        <FaPaperPlane onClick={handleSend} className={styles.sendicon} />
+      </div>
+    </div>
+  );
+}
+
+/*
+
+// Chatbot.tsx
+import React, { useState } from 'react';
+import { FaPaperPlane, FaSmile } from 'react-icons/fa';
+import Picker, { IEmojiData } from 'emoji-picker-react';
+
+interface Message {
+  text: string;
+  user: 'me' | 'bot';
+}
+
+const Chatbot: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState<string>('');
+  const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
+
+  const handleSend = () => {
+    if (input.trim()) {
+      setMessages([...messages, { text: input, user: 'me' }]);
+      setInput('');
+      setShowEmojiPicker(false);
+
+      // Here you would also call the OpenAI API and handle the response
+      // Example:
+      // fetchOpenAIResponse(input).then(response => {
+      //   setMessages([...messages, { text: input, user: 'me' }, { text: response, user: 'bot' }]);
+      // });
+    }
+  };
+
+  const handleEmojiClick = (event: React.MouseEvent<Element, MouseEvent>, emojiObject: IEmojiData) => {
+    setInput(input + emojiObject.emoji);
+  };
+
+  return (
+    <div className="chatbot-container">
+      <div className="messages-box">
+        {messages.map((msg, index) => (
+          <div key={index} className={`message ${msg.user}`}>
+            {msg.text}
+          </div>
+        ))}
+      </div>
+      <div className="input-box">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type a message..."
+        />
+        <FaSmile onClick={() => setShowEmojiPicker(!showEmojiPicker)} className="emoji-icon" />
+        {showEmojiPicker && <Picker onEmojiClick={handleEmojiClick} />}
+        <FaPaperPlane onClick={handleSend} className="send-icon" />
+      </div>
+    </div>
+  );
+};
+
+export default Chatbot;
+
+*/

package/src/global.d.ts

@@ -0,0 +1,9 @@
+// global.d.ts
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as ChatBot } from "./chatbot.js";

package/src/inputbox.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+interface InputBoxProps {
+  children: React.ReactNode;
+}
+
+export function InputBox(
+  props: InputBoxProps
+): React.ReactElement<InputBoxProps> {
+  return <div>{props.children}</div>;
+}

package/src/renderpriority.ts

@@ -0,0 +1,8 @@
+enum RenderPriority {
+  Three = 0,
+  UI = 1,
+  Animation = 2,
+  Particle = 3,
+}
+
+export { RenderPriority };

package/src/styles/chatbot.module.css

@@ -0,0 +1,106 @@
+/* src/components/Chatbot.css */
+.chatbotcontainer {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #f9f9f9;
+}
+
+.messagesbox {
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+  background: #fff;
+}
+
+.message {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message.system {
+  justify-content: flex-start;
+}
+
+.bubble {
+  max-width: 60%;
+  padding: 10px 15px;
+  border-radius: 15px;
+  font-size: 14px;
+  line-height: 1.5;
+  position: relative;
+  word-wrap: break-word;
+}
+
+.message.user .bubble {
+  background: #007bff;
+  color: #fff;
+}
+
+.message.system .bubble {
+  background: #e9ecef;
+  color: #333;
+}
+
+.bubble::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.message.user .bubble::after {
+  right: -10px;
+  top: 50%;
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent #007bff;
+  transform: translateY(-50%);
+}
+
+.message.system .bubble::after {
+  left: -10px;
+  top: 50%;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent #e9ecef transparent transparent;
+  transform: translateY(-50%);
+}
+
+.inputbox {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+  background: #fff;
+}
+
+.inputbox input {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+.emojiicon, .sendicon {
+  margin-left: 10px;
+  cursor: pointer;
+  color: whitesmoke;
+}
+
+.emojiicon {
+  font-size: 20px;
+}
+
+.sendicon {
+  font-size: 20px;
+}

package/src/types/emoji-picker-react-esm.d.ts

@@ -0,0 +1,3 @@
+declare module "emoji-picker-react/dist/emoji-picker-react.esm.js" {
+  export const EmojiPicker: React.ComponentType<any>;
+}