Add generic api schema and scripts model

resources/views/livewire/create-edit-bot.blade.php

@@ -1,3 +1,4 @@
+@section('title', $routeName)
 <div>
     <div class="mb-4">
         <input
@@ -14,13 +15,13 @@
     <div>
         <select wire:model.live="class" class="border p-2 rounded mb-2 w-full">
             <option hidden selected>Select Bot Schema</option>
-            @foreach ($classList as $label => $class)
-                <option class="text-black" value="{{ $label }}">
+            @foreach ($classList as $class => $label)
+                <option class="text-black" value="{{ $class }}">
                     {{ $label }}
                 </option>
             @endforeach
         </select>
-        @error('bot')
+        @error('class')
             <span class="text-red-500">{{ $message }}</span>
         @enderror
     </div>
@@ -41,20 +42,50 @@
     </div>
 
     <div class="mt-4">
-        <h2>Config</h2>
+        <div class="mb-4 text-xl">
+            <h2>Config</h2>
+        </div>
         @forelse ($configSchema as $field => $meta)
-            <label>{{ $meta['label'] }}</label>
-            <input
-                class="border p-2 rounded mb-2 w-full"
-                type="text"
-                name="config[{{ $field }}]"
-                value="{{ old("config.$field", $bot->config[$field] ?? '') }}"
-            />
+            <div class="mb-4">
+                <label>{{ $meta['label'] }}</label>
+
+                @if ($meta['type'] === 'json')
+                    <div x-data="jsonEditor(@entangle('config.' . $field))">
+                        <label
+                            for="config-body"
+                            class="block font-semibold mb-1"
+                        >
+                            Request Body (JSON)
+                        </label>
+                        <textarea
+                            id="config-body"
+                            x-model="value"
+                            wire:model.live="config.{{ $field }}"
+                            @keydown="handleKeydown($event)"
+                            class="w-full h-40 p-2 font-mono border rounded-md"
+                        ></textarea>
+                    </div>
+                    <span
+                        class="text-blue-300 cursor-pointer"
+                        wire:click="prettify('{{ $field }}')"
+                    >
+                        Prettify
+                    </span>
+                @else
+                    <input
+                        wire:model.live="config.{{ $field }}"
+                        class="border p-2 rounded mb-2 w-full"
+                        type="text"
+                        name="config[{{ $field }}]"
+                        value="{{ old("config.$field", $bot->config[$field] ?? '') }}"
+                    />
+                @endif
+            </div>
             @error('config.' . $field)
                 <span class="text-red-500">{{ $message }}</span>
             @enderror
         @empty
-            Select a bot first
+            <i class="text-gray-400">Select a bot first</i>
         @endforelse
     </div>
 
@@ -68,9 +99,56 @@
     <div>
         <button
             wire:click="save"
-            class="mt-6 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+            class="mt-6 bg-blue-500 text-white px-4 py-2 rounded cursor-pointer"
         >
             {{ $routeName }}
         </button>
     </div>
 </div>
+
+<script>
+    function jsonEditor(model) {
+        return {
+            value: model,
+            handleKeydown(e) {
+                const textarea = e.target;
+                const val = textarea.value;
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+
+                // Map of pairs
+                const pairs = {
+                    '{': '}',
+                    '[': ']',
+                    '"': '"',
+                    "'": "'",
+                };
+
+                if (pairs[e.key]) {
+                    e.preventDefault();
+                    const open = e.key;
+                    const close = pairs[e.key];
+
+                    textarea.setRangeText(open + close, start, end, 'end');
+                    textarea.selectionStart = textarea.selectionEnd = start + 1;
+                    this.value = textarea.value;
+                }
+
+                // Auto-indent new line inside braces
+                if (
+                    e.key === 'Enter' &&
+                    val[start - 1] === '{' &&
+                    val[end] === '}'
+                ) {
+                    e.preventDefault();
+                    const indent = '  ';
+                    const newText = `\n${indent}\n`;
+                    textarea.setRangeText(newText, start, end, 'end');
+                    textarea.selectionStart = textarea.selectionEnd =
+                        start + newText.length - 1;
+                    this.value = textarea.value;
+                }
+            },
+        };
+    }
+</script>