Implement draggable input area for chat interface, enhance styling for better layout, and refine system prompt instructions for using Leaflet.js.

Author: rstropek

workshop-ui/prompts/03-gps-art/system-prompt.md

@@ -30,6 +30,23 @@ Führe die Kinder Schritt für Schritt durch die Aufgabe.
 
 Wenn die Kinder um eine Landkarte fragen, dann erstelle eine HTML-Seite mit eingebettetem JS/CSS unter Verwendung von Leaflet.js. Füge NICHT die CSV-Daten in den Code ein, sie wären zu groß. Stattdessen füge den Platzhalter `<|DATA|>` ein, wo die Daten als Text (genau wie in der CSV-Datei) eingefügt werden müssen. Verwende <|DATA|> NUR EINMAL WO DIE DATEN EINGEFÜGT WERDEN. Erwähne es KEINESFALLS z.B. in Kommentaren! Weise das Kinde NICHT darauf hin, dass es den Platzhalter ersetzen muss. Das macht die Lernsoftware, in der du eingebettet bist, automatisch.
 
+**ACHTUNG:** Wenn du Leaflet.js in den HTML-Code einbaust, beachte auf jeden Fall folgenden Hinweis aus der Dokumentation:
+
+```
+Include Leaflet CSS file in the head section of your document:
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
+     
+Include Leaflet JavaScript file after Leaflet’s CSS:
+
+ <!-- Make sure you put this AFTER Leaflet's CSS -->
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+     crossorigin=""></script>
+```
+
 Markiere generierten HTML Code immer wie in Markdown üblich mit ```html. Du brauchst die Kinder nicht darauf hinzuweisen, wie man die HTML-Seite in einen Browser lädt. Sobald du HTML-Code generierst, wird dieser in der KI-Lernapp inkl. der eingebetteten Daten unter deiner letzten Antwort in einen _iframe_ angezeigt.
 
 Immer, wenn das Kind etwas vom Gesuchten herausgefunden hat, zeige eine Checkliste als Markdown-Aufzählung an, damit das Kind sieht, was es schon geschafft hat und was noch fehlt. Je Element, verwende Emojis (✅ und ❓), um darzustellen, ob es erledigt ist oder nicht. Die zu beantwortenden Fragen sind:

workshop-ui/src/app/chat/[exercise]/page.module.css

@@ -114,7 +114,6 @@
 .messagesContainer {
   flex: 1;
   overflow-y: auto;
-  margin-bottom: 20px;
   border: 3px solid #aaa;
   padding: 15px;
   border-radius: 8px;
@@ -123,6 +122,56 @@
   flex-direction: column;
 }
 
+.dragHandle {
+  position: fixed;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &.dragging {
+    background-color: rgba(0, 123, 255, 0.1);
+  }
+}
+
+.dragHandleBar {
+  width: 40px;
+  height: 4px;
+  background-color: #aaa;
+  border-radius: 2px;
+  transition: background-color 0.2s;
+
+  .dragHandle:hover & {
+    background-color: #007bff;
+  }
+
+  .dragHandle.dragging & {
+    background-color: #007bff;
+  }
+}
+
+.inputAreaContainer {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 40px);
+  max-width: 760px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+}
+
 .loader {
   height: 30px;
   width: calc(30px * 2.5);

workshop-ui/src/app/chat/[exercise]/page.tsx

@@ -36,6 +36,8 @@ export default function Home() {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [isFirstCall, setIsFirstCall] = useState(true);
   const [responseId, setResponseId] = useState<string | undefined>(undefined);
+  const [inputAreaHeight, setInputAreaHeight] = useState(150); // Initial height in pixels
+  const [isDragging, setIsDragging] = useState(false);
 
   // Cache for data file content - only fetch once per component session
   const dataFileContentCache = useRef<string | null>(null);
@@ -128,6 +130,38 @@ export default function Home() {
     fetchExerciseMetadata();
   }, [exercise, welcomeMessageLoaded]);
 
+  // Handle drag for resizing input area
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging) return;
+      
+      // Calculate new height based on mouse position from bottom of viewport
+      const newHeight = window.innerHeight - e.clientY - 20; // 20px for padding
+      
+      // Constrain height between 100px and 500px
+      const constrainedHeight = Math.max(100, Math.min(500, newHeight));
+      setInputAreaHeight(constrainedHeight);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      
+      // Prevent text selection while dragging
+      document.body.style.userSelect = 'none';
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.userSelect = '';
+    };
+  }, [isDragging]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -265,6 +299,10 @@ export default function Home() {
     }
   };
 
+  const handleDragStart = () => {
+    setIsDragging(true);
+  };
+
   return (
     <div className={styles.container}>
       {/* Header Bar */}
@@ -306,7 +344,7 @@ export default function Home() {
       </Modal>
 
       {/* Conversation History */}
-      <div className={styles.messagesContainer} ref={messagesContainerRef}>
+      <div className={styles.messagesContainer} ref={messagesContainerRef} style={{ marginBottom: `${inputAreaHeight + 30}px` }}>
         {messages.map((message) => (
           <Message message={message} key={hashMessage(message)} />
         ))}
@@ -333,7 +371,19 @@ export default function Home() {
         <div ref={messagesEndRef} />
       </div>
 
-      <ChatInputArea inputRef={inputRef} inputValue={input} setInputValue={setInput} onSubmit={handleSubmit} isLoading={isLoading} messageCount={messages.length} />
+      {/* Drag Handle */}
+      <div 
+        className={`${styles.dragHandle} ${isDragging ? styles.dragging : ''}`}
+        onMouseDown={handleDragStart}
+        style={{ bottom: `${inputAreaHeight + 10}px` }}
+      >
+        <div className={styles.dragHandleBar} />
+      </div>
+
+      {/* Input Area */}
+      <div className={styles.inputAreaContainer} style={{ height: `${inputAreaHeight}px` }}>
+        <ChatInputArea inputRef={inputRef} inputValue={input} setInputValue={setInput} onSubmit={handleSubmit} isLoading={isLoading} messageCount={messages.length} />
+      </div>
     </div>
   );
 }

workshop-ui/src/components/chat/ChatInputArea.module.css

@@ -1,6 +1,15 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 10px;
+}
+
 .inputForm {
     display: flex;
     gap: 10px;
+    flex: 1;
+    min-height: 0;
 }
 
 .textInput {
@@ -9,7 +18,8 @@
     font-size: 16px;
     border: 1px solid #ccc;
     border-radius: 4px;
-    resize: vertical;
+    resize: none;
+    min-height: 60px;
 
     &:disabled {
         background-color: #f5f5f5;
@@ -36,8 +46,8 @@
 }
 
 .messageCounter {
-    margin-top: 10px;
     font-size: 12px;
     color: #666;
     text-align: center;
+    flex-shrink: 0;
 }

workshop-ui/src/components/chat/ChatInputArea.tsx

@@ -28,7 +28,7 @@ export default function ChatInputArea({
         }
     };
     return (
-        <>
+        <div className={styles.wrapper}>
             <form onSubmit={onSubmit} className={styles.inputForm}>
                 <textarea
                     ref={inputRef}
@@ -43,7 +43,6 @@ export default function ChatInputArea({
                     placeholder="Schreibe deine Nachricht hier..."
                     disabled={isLoading}
                     className={styles.textInput}
-                    rows={2}
                 />
                 <button type="submit" disabled={!inputValue.trim() || isLoading || messageCount >= 100} className={styles.sendButton}>
                     <Send />
@@ -54,6 +53,6 @@ export default function ChatInputArea({
             <div className={styles.messageCounter}>
                 {messageCount}/100 Nachrichten | {inputValue.length}/1000 Zeichen
             </div>
-        </>
+        </div>
     );
 }