some updates

WelsonJS.Toolkit/WelsonJS.Launcher/Properties/Resources.Designer.cs

@@ -90,9 +90,18 @@ namespace WelsonJS.Launcher.Properties {
         /// <summary>
         ///   https://catswords.blob.core.windows.net/welsonjs/과(와) 유사한 지역화된 문자열을 찾습니다.
         /// </summary>
-        internal static string BlobServerPrefix {
+        internal static string BlobStoragePrefix {
             get {
-                return ResourceManager.GetString("BlobServerPrefix", resourceCulture);
+                return ResourceManager.GetString("BlobStoragePrefix", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   https://cdnjs.cloudflare.com/과(와) 유사한 지역화된 문자열을 찾습니다.
+        /// </summary>
+        internal static string CdnJsPrefix {
+            get {
+                return ResourceManager.GetString("CdnJsPrefix", resourceCulture);
             }
         }
         

WelsonJS.Toolkit/WelsonJS.Launcher/Properties/Resources.resx

@@ -178,10 +178,13 @@
   <data name="WhoisServerUrl" xml:space="preserve">
     <value>https://xn--c79as89aj0e29b77z.xn--3e0b707e/kor/whois.jsc</value>
   </data>
-  <data name="BlobServerPrefix" xml:space="preserve">
+  <data name="BlobStoragePrefix" xml:space="preserve">
     <value>https://catswords.blob.core.windows.net/welsonjs/</value>
   </data>
   <data name="AzureAiServiceApiVersion" xml:space="preserve">
     <value>2024-05-01-preview</value>
   </data>
+  <data name="CdnJsPrefix" xml:space="preserve">
+    <value>https://cdnjs.cloudflare.com/</value>
+  </data>
 </root>

WelsonJS.Toolkit/WelsonJS.Launcher/ResourceServer.cs

@@ -2,7 +2,6 @@
 using System.Collections.Generic;
 using System.Diagnostics;
 using System.IO;
-using System.IO.Compression;
 using System.Net;
 using System.Net.Http;
 using System.Reflection;
@@ -23,7 +22,6 @@ namespace WelsonJS.Launcher
         private string _prefix;
         private string _resourceName;
         private List<IResourceTool> _tools = new List<IResourceTool>();
-        private const int _httpClientTimeout = 5000;
         private readonly HttpClient _httpClient = new HttpClient();
         private readonly string _defaultMimeType = "application/octet-stream";
 
@@ -33,7 +31,7 @@ namespace WelsonJS.Launcher
             _listener = new HttpListener();
             _listener.Prefixes.Add(prefix);
             _resourceName = resourceName;
-            _httpClient.Timeout = TimeSpan.FromMilliseconds(_httpClientTimeout);
+            _httpClient.Timeout = TimeSpan.FromSeconds(30);
 
             // Add resource tools
             _tools.Add(new ResourceTools.Completion(this, _httpClient));
@@ -129,56 +127,76 @@ namespace WelsonJS.Launcher
             ServeResource(context, GetResource(_resourceName), "text/html");
         }
 
-        private async Task<bool> ServeBlob(HttpListenerContext context, string path)
+        private async Task<bool> ServeBlob(HttpListenerContext context, string path, string prefix = null)
         {
             byte[] data;
             string mimeType;
 
-            // Try serve data from the cached blob
+            if (!String.IsNullOrEmpty(prefix))
-            if (TryGetCachedBlob(path, out mimeType, true))
             {
-                if (TryGetCachedBlob(path, out data))
+                string url = $"{prefix}{path}";
-                {
-                    if (String.IsNullOrEmpty(mimeType))
-                    {
-                        mimeType = _defaultMimeType;
-                    }
 
-                    ServeResource(context, data, mimeType);
+                try
+                {
+                    using (var client = new HttpClient())
+                    {
+                        HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, url);
+                        request.Headers.UserAgent.ParseAdd(context.Request.UserAgent);
+                        HttpResponseMessage response = await client.SendAsync(request);
+
+                        if (!response.IsSuccessStatusCode)
+                        {
+                            Trace.TraceError($"Failed to serve blob. URL: {url}, Status: {response.StatusCode}");
+                            return false;
+                        }
+
+                        data = await response.Content.ReadAsByteArrayAsync();
+                        mimeType = response.Content.Headers.ContentType?.MediaType ?? _defaultMimeType;
+
+                        ServeResource(context, data, mimeType);
+                        _ = TrySaveCachedBlob(path, data, mimeType);
+
+                        return true;
+                    }
+                }
+                catch (Exception ex)
+                {
+                    Trace.TraceError($"Failed to serve blob. URL: {url}, Exception: {ex.Message}");
+                    return false;
+                }
+            }
+            else
+            {
+                // use the cached data
+                if (TryGetCachedBlob(path, out mimeType, true))
+                {
+                    if (TryGetCachedBlob(path, out data))
+                    {
+                        if (String.IsNullOrEmpty(mimeType))
+                        {
+                            mimeType = _defaultMimeType;
+                        }
+
+                        ServeResource(context, data, mimeType);
+                        return true;
+                    }
+                }
+
+                // use the cdn-js
+                if (path.StartsWith("ajax/libs/"))
+                {
+                    if (await ServeBlob(context, path, Program.GetAppConfig("CdnJsPrefix"))) {
+                        return true;
+                    }
+                }
+
+                // use the blob stroage
+                if (await ServeBlob(context, path, Program.GetAppConfig("BlobStoragePrefix"))) {
                     return true;
                 }
             }
 
-            // If not cached yet
+            return false;
-            try
-            {
-                
-                string blobServerPrefix = Program.GetAppConfig("BlobServerPrefix");
-                string url = $"{blobServerPrefix}{path}";
-
-                HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, url);
-                request.Headers.UserAgent.ParseAdd(context.Request.UserAgent);
-                HttpResponseMessage response = await _httpClient.SendAsync(request);
-
-                if (!response.IsSuccessStatusCode)
-                {
-                    Trace.TraceError($"Failed to serve blob. Status: {response.StatusCode}");
-                    return false;
-                }
-
-                data = await response.Content.ReadAsByteArrayAsync();
-                mimeType = response.Content.Headers.ContentType?.MediaType ?? _defaultMimeType;
-
-                ServeResource(context, data, mimeType);
-                _ = TrySaveCachedBlob(path, data, mimeType);
-
-                return true;
-            }
-            catch (Exception ex)
-            {
-                Trace.TraceError($"Failed to serve blob. Exception: {ex.Message}");
-                return false;
-            }
         }
 
         private string GetCachedBlobPath(string path)
@@ -220,7 +238,7 @@ namespace WelsonJS.Launcher
             }
             catch (Exception ex)
             {
-                Trace.TraceError($"Error: {ex.Message}");
+                Trace.TraceError($"Cache Read Error: {ex.Message}");
             }
 
             data = null;

WelsonJS.Toolkit/WelsonJS.Launcher/app.config

@@ -12,7 +12,8 @@
     <add key="WhoisReferrerUrl" value="https://xn--c79as89aj0e29b77z.xn--3e0b707e/kor/whois/whois.jsp"/>
     <add key="WhoisClientAddress" value="141.101.82.1"/>
     <add key="DnsServerAddress" value="1.1.1.1"/>
-    <add key="BlobServerPrefix" value="https://catswords.blob.core.windows.net/welsonjs/"/>
+    <add key="BlobStoragePrefix" value="https://catswords.blob.core.windows.net/welsonjs/"/>
+    <add key="CdnJsPrefix" value="https://cdnjs.cloudflare.com/"/>
   </appSettings>
   <startup>
     <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2"/>

WelsonJS.Toolkit/WelsonJS.Launcher/editor.html

@@ -4,7 +4,7 @@
     <title>WelsonJS Editor</title>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <style>
-        html, body {
+        html, body, #app, #app > .app {
             margin: 0;
             padding: 0;
             width: 100%;
@@ -14,12 +14,20 @@
 
         #container {
             border: 1px solid grey;
-            height: calc(100% - 139px);
+            height: calc(100% - 167px);
             overflow: hidden;
         }
 
-        #fileInput {
+        #editor {
-            display: none;
+            float: left;
+            width: 75%;
+            height: 100%;
+        }
+
+        #promptEditor {
+            float: left;
+            width: 25%;
+            height: 100%;
         }
 
         .banner {
@@ -32,6 +40,21 @@
 </head>
 <body>
     <div id="app"></div>
+    <script>
+        var require = {
+            paths: {
+                vs: 'http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs'
+            }
+        };
+    </script>
+    <script src="http://localhost:3000/ajax/libs/jsoneditor/10.1.3/jsoneditor.min.js"></script>
+    <script src="http://localhost:3000/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
+    <script src="http://localhost:3000/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
+    <script src="http://localhost:3000/ajax/libs/axios/1.8.4/axios.min.js"></script>
+    <script src="http://localhost:3000/ajax/libs/fast-xml-parser/4.5.1/fxparser.min.js"></script>
+    <script src="http://localhost:3000/ajax/libs/dompurify/3.2.4/purify.min.js"></script>
+    <script src="http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs/loader.js"></script>
+    <script src="http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs/editor/editor.main.js"></script>
     <script>
         function loadResource(url, mimeType, integrity) {
             mimeType = mimeType || 'application/javascript';
@@ -42,9 +65,11 @@
                 if (mimeType === 'text/css') {
                     el = document.createElement('link');
                     el.rel = 'stylesheet';
+                    el.type = mimeType;
                     el.href = url;
                 } else {
                     el = document.createElement('script');
+                    el.type = mimeType;
                     el.src = url;
                 }
 
@@ -61,23 +86,11 @@
         }
 
         Promise.all([
-            loadResource("http://localhost:3000/ajax/libs/metroui/dev/lib/metro.css", "text/css", "sha384-4XgOiXH2ZMaWt5s5B35yKi7EAOabhZvx7wO8Jr71q2vZ+uONdRza/6CsK2kpyocd"),
+            loadResource("http://localhost:3000/ajax/libs/metroui/dev/lib/metro.css", "text/css"),
-            loadResource("http://localhost:3000/ajax/libs/metroui/dev/lib/icons.css", "text/css", "sha384-FuLND994etg+RtnpPSPMyNBvL+fEz+xGhbN61WUWuDEeZ+wJzcQ8SGqAMuI5hWrt"),
+            loadResource("http://localhost:3000/ajax/libs/metroui/dev/lib/icons.css", "text/css"),
-            loadResource("http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs/editor/editor.main.css", "text/css", "sha384-06yHXpYRlHEPaR4AS0fB/W+lMN09Zh5e1XMtfkNQdHV38OlhfkOEW5M+pCj3QskC"),
+            loadResource("http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs/editor/editor.main.css", "text/css"),
-            loadResource("http://localhost:3000/ajax/libs/axios/1.8.4/axios.min.js", null, "sha384-06w+raHvkSL3+E7mbQ2X6DZwI5A3veU8Ba+NLrAPxxRGw4Xy78sihHDHQMustMM4"),
+            loadResource("http://localhost:3000/ajax/libs/jsoneditor/10.1.3/jsoneditor.min.css", "text/css")
-            loadResource("http://localhost:3000/ajax/libs/fast-xml-parser/4.5.1/fxparser.min.js", null, "sha384-ae/HepOQ8hiJ/VA6yGwPMGXQXOkT/lJpjlcQ7EUgibUcfnBltuozgNj4IgOZ9QLc"),
-            loadResource("http://localhost:3000/ajax/libs/dompurify/3.2.4/purify.min.js", null, "sha384-eEu5CTj3qGvu9PdJuS+YlkNi7d2XxQROAFYOr59zgObtlcux1ae1Il3u7jvdCSWu"),
-            loadResource("http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs/loader.js", null, "sha384-pHG02SG8pId94Np3AbPmBEJ1yPqaH0IkJGLSNGXYmuGhkazT8Lr/57WYpbkGjJtu"),
-            loadResource("http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs/editor/editor.main.js", null, "sha384-fj9z+NUc93I3woCCy5IRQfrQ8Amu1E27tllwgb5gz3d9Vr1ymS13xcF6two3e4KH"),
-            loadResource("https://unpkg.com/react@18/umd/react.development.js"),
-            loadResource("https://unpkg.com/react-dom@18/umd/react-dom.development.js")
         ]).then(() => {
-            require.config({
-                paths: {
-                    vs: 'http://localhost:3000/ajax/libs/monaco-editor/0.52.2/min/vs'
-                }
-            });
-
             const _e = React.createElement;
 
             function Button({ id, icon, caption, onClick }) {
@@ -152,7 +165,8 @@
                 const containerRef = React.useRef(null);
 
                 React.useEffect(() => {
-                    if (!containerRef.current) return;
+                    if (!containerRef.current)
+                        return;
 
                     require(['vs/editor/editor.main'], () => {
                         const instance = monaco.editor.create(containerRef.current, {
@@ -167,9 +181,27 @@
                 return _e('div', { id: 'editor', ref: containerRef });
             }
 
+            function PromptEditor({ promptEditorRef, promptMessagesRef }) {
+                const containerRef = React.useRef(null);
+
+                React.useEffect(() => {
+                    if (!containerRef.current)
+                        return;
+
+                    const options = {};
+                    const instance = new JSONEditor(containerRef.current, options);
+                    instance.set(promptMessagesRef.current);
+
+                    promptEditorRef.current = instance;
+                }, []);
+
+                return _e('div', { id: 'promptEditor', ref: containerRef });
+            }
+
             function App() {
                 const serverPrefix = "http://localhost:3000/";
                 const editorRef = React.useRef(null);
+                const promptEditorRef = React.useRef(null);
                 const settingsRef = React.useRef({});
                 const fileNameRef = React.useRef('sayhello.js');
                 const promptMessagesRef = React.useRef([]);
@@ -229,6 +261,7 @@
                         role: role,
                         content: content
                     });
+                    promptEditorRef.current.set(promptMessagesRef.current);
                 };
 
                 const navigate = (href) => {
@@ -240,6 +273,7 @@
                 };
 
                 const appendTextToEditor = (text) => {
+                    const editor = editorRef.current;
                     const position = editor.getPosition();
                     const range = new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column);
                     editor.executeEdits('', [{
@@ -424,13 +458,13 @@
                             appendTextToEditor(`/*\n${responseText}\n*/`);
                         });
                     })
-                    .catch(error => {
+                        .catch(error => {
-                        console.error('Error:', error.response?.data || error.message);
+                            console.error('Error:', error.response?.data || error.message);
-                    });
+                        });
                 };
 
                 const savePromptMessages = () => {
-                    const text = JSON.stringify(promptMessages.current, null, 4);
+                    const text = JSON.stringify(promptMessagesRef.current, null, 4);
                     const blob = new Blob([text], { type: 'text/plain' });
                     const a = document.createElement('a');
                     a.href = URL.createObjectURL(blob);
@@ -446,13 +480,14 @@
                     fileInput.accept = '.json';
                     fileInput.onchange = function (event) {
                         const file = event.target.files[0];
-                        
+
                         if (!file)
                             return;
 
                         let reader = new FileReader();
                         reader.onload = function (e) {
-                            promptMessages = JSON.parse(e.target.result);
+                            promptMessagesRef.current = JSON.parse(e.target.result);
+                            promptEditorRef.current.set(promptMessagesRef.current);
                             appendTextToEditor("\n//Prompt loaded successfully.");
                         };
                         reader.readAsText(file);
@@ -496,7 +531,6 @@
                     window.addEventListener('resize', () => {
                         resizeEditor();
                     });
-
                     window.dispatchEvent(new Event('resize'));
                 }, []);
 
@@ -513,13 +547,16 @@
                         onQueryWhoisClick: queryWhois,
                         onQueryDnsClick: queryDns
                     }),
-                    _e('div', { className: 'banner' }, 'WelsonJS Editor'),
+                    _e('div', { id: 'container' },
-                    _e(Editor, { editorRef })
+                        _e(Editor, { editorRef }),
+                        _e(PromptEditor, { promptEditorRef, promptMessagesRef })
+                    ),
+                    _e('div', { className: 'banner' }, _e('a', { href: 'https://github.com/gnh1201/welsonjs' }, 'WelsonJS'), ' Editor powered by Metro UI, Monaco Editor, and JSONEditor.'),
                 );
             }
 
             const container = document.getElementById('app');
-            const root = ReactDOM.createRoot(container); 
+            const root = ReactDOM.createRoot(container);
             root.render(_e(App));
         });
     </script>