From 2441f48b29eed46bc935a4bb27f1b092ace92fe4 Mon Sep 17 00:00:00 2001
From: Peter Hughes <github@phugh.es>
Date: Thu, 5 Sep 2024 22:52:00 +0100
Subject: [PATCH] minor input improvements

---
 components/CustomPersonalityInput.tsx |  8 +++++---
 components/DebateFormInputs.tsx       |  9 +++++----
 islands/AgentSelector.tsx             | 11 ++++++-----
 static/sw.js                          |  2 +-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/CustomPersonalityInput.tsx b/components/CustomPersonalityInput.tsx
index 53bd666..f9e2867 100644
--- a/components/CustomPersonalityInput.tsx
+++ b/components/CustomPersonalityInput.tsx
@@ -1,5 +1,6 @@
 import { MAX_PERSONALITY_LENGTH } from "lib/debate/inputValidation.ts";
 import { personalities } from "lib/debate/personalities.ts";
+import { cleanContent, sanitizeInput } from "lib/utils.ts";
 import { useEffect, useState } from "preact/hooks";
 
 interface CustomPersonalityInputProps {
@@ -14,12 +15,13 @@ export default function CustomPersonalityInput(props: CustomPersonalityInputProp
 
   // Personality dropdown handler
   useEffect(() => {
-    const matchingPersonality = personalities.find((p) => p.personality === value);
+    const sanitizedValue = cleanContent(sanitizeInput(value));
+    const matchingPersonality = personalities.find((p) => p.personality === sanitizedValue);
     if (matchingPersonality) {
       setSelectedOption(matchingPersonality.name);
     } else {
       setSelectedOption("custom");
-      setCustomInput(value);
+      setCustomInput(sanitizedValue);
     }
   }, [value]);
 
@@ -40,7 +42,7 @@ export default function CustomPersonalityInput(props: CustomPersonalityInputProp
   };
 
   const handleCustomInputChange = (e: Event) => {
-    const newValue = (e.target as HTMLTextAreaElement).value;
+    const newValue = cleanContent(sanitizeInput((e.target as HTMLTextAreaElement).value));
     setCustomInput(newValue);
     onChange(newValue);
   };
diff --git a/components/DebateFormInputs.tsx b/components/DebateFormInputs.tsx
index 25ee8f4..9dfe24b 100644
--- a/components/DebateFormInputs.tsx
+++ b/components/DebateFormInputs.tsx
@@ -8,6 +8,7 @@ import {
   MIN_DEBATE_ROUNDS,
 } from "lib/debate/inputValidation.ts";
 import type { Personality } from "lib/debate/personalities.ts";
+import { cleanContent, sanitizeInput } from "lib/utils.ts";
 import type { VoiceType } from "routes/api/voicesynth.tsx";
 
 interface DebateFormInputsProps {
@@ -87,7 +88,7 @@ export default function DebateFormInputs(props: DebateFormInputsProps) {
               placeholder={EXAMPLE_POSITIONS[Math.floor(Math.random() * EXAMPLE_POSITIONS.length)]}
               minLength={4}
               maxLength={MAX_POSITION_LENGTH}
-              onInput={(e) => setPosition((e.target as HTMLInputElement).value)}
+              onChange={(e) => setPosition(cleanContent(sanitizeInput((e.target as HTMLInputElement).value)))}
               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
               required
             />
@@ -102,7 +103,7 @@ export default function DebateFormInputs(props: DebateFormInputsProps) {
                 type="number"
                 id="numAgents"
                 value={numAgents}
-                onInput={(e) => setNumAgents(parseInt((e.target as HTMLInputElement).value, 10))}
+                onChange={(e) => setNumAgents(parseInt((e.target as HTMLInputElement).value, 10))}
                 min={MIN_AGENTS}
                 max={MAX_AGENTS}
                 class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
@@ -117,7 +118,7 @@ export default function DebateFormInputs(props: DebateFormInputsProps) {
                 type="number"
                 id="numDebateRounds"
                 value={numDebateRounds}
-                onInput={(e) => setNumDebateRounds(parseInt((e.target as HTMLInputElement).value, 10))}
+                onChange={(e) => setNumDebateRounds(parseInt((e.target as HTMLInputElement).value, 10))}
                 min={MIN_DEBATE_ROUNDS}
                 max={MAX_DEBATE_ROUNDS}
                 class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
@@ -157,7 +158,7 @@ export default function DebateFormInputs(props: DebateFormInputsProps) {
                 <textarea
                   id="context"
                   value={context}
-                  onInput={(e) => setContext((e.target as HTMLTextAreaElement).value)}
+                  onChange={(e) => setContext(cleanContent(sanitizeInput((e.target as HTMLTextAreaElement).value)))}
                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                   rows={3}
                   placeholder="Provide any additional context for the debate. This will help the participants understand the topic better. For example, where is the debate taking place?"
diff --git a/islands/AgentSelector.tsx b/islands/AgentSelector.tsx
index c78aa23..ac8197a 100644
--- a/islands/AgentSelector.tsx
+++ b/islands/AgentSelector.tsx
@@ -1,7 +1,7 @@
 import CustomPersonalityInput from "components/CustomPersonalityInput.tsx";
 import { MAX_NAME_LENGTH } from "lib/debate/inputValidation.ts";
 import type { Personality } from "lib/debate/personalities.ts";
-import { sanitizeInput } from "lib/utils.ts";
+import { cleanContent, sanitizeInput } from "lib/utils.ts";
 
 interface AgentSelectorProps {
   agentDetails: Required<Personality>[];
@@ -15,7 +15,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
     const newAgents = [...agentDetails];
     newAgents[index] = {
       ...newAgents[index],
-      personality,
+      personality: cleanContent(sanitizeInput(personality)),
     };
     setAgentDetails(newAgents);
   };
@@ -25,8 +25,9 @@ export default function AgentSelector(props: AgentSelectorProps) {
     field: keyof Personality,
     value: string,
   ) => {
+    const sanitizedValue = sanitizeInput(value);
     const newAgents = [...agentDetails];
-    newAgents[index] = { ...newAgents[index], [field]: value };
+    newAgents[index] = { ...newAgents[index], [field]: sanitizedValue };
     setAgentDetails(newAgents);
   };
 
@@ -51,8 +52,8 @@ export default function AgentSelector(props: AgentSelectorProps) {
                   <input
                     id={`agent-name-${index}`}
                     type="text"
-                    value={agent.name.split(" ")[1]}
-                    onInput={(e) =>
+                    value={agent.name}
+                    onChange={(e) =>
                       handleAgentDetailChange(
                         index,
                         "name",
diff --git a/static/sw.js b/static/sw.js
index 9372018..f0eb89a 100644
--- a/static/sw.js
+++ b/static/sw.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = "debatething-cache-v2";
+const CACHE_NAME = "debatething-cache-v3";
 const urlsToCache = [
   "/",
   "/styles.css",