apply and fix code features

Signed-off-by: Akshat Batra <[email protected]>

Author: akshatbatra

LICENSE

@@ -198,4 +198,39 @@
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.
+
+-------------------------------------------------------------------------------
+
+This project includes third-party software components governed by separate license terms, as follows:
+
+-------------------------------------------------------------------------------
+jsdiff (https://github.com/kpdecker/jsdiff) — BSD 3-Clause License
+
+Copyright (c) 2009-2015, Kevin Decker <[email protected]>
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+For the most up-to-date full license text, see the jsdiff repository: https://github.com/kpdecker/jsdiff/blob/master/LICENSE
+-------------------------------------------------------------------------------

package-lock.json

@@ -29,6 +29,7 @@
     "@types/styled-components": "^5.1.34",
     "antd": "^5.7.2",
     "core-js": "^3.37.1",
+    "diff": "^8.0.2",
     "highlight.js": "^11.10.0",
     "immer": "^10.1.1",
     "jest-canvas-mock": "^2.5.2",

package.json

@@ -52,8 +52,7 @@ export const prepareSystemPrompt = {
   },
 
   default: (editorsContent: editorsContent, aiConfig?: any) => {
-    let prompt = `You are a helpful assistant that answers questions about open source Accord Project. You assist the user 
-    to work with TemplateMark, Concerto models and JSON data. Code blocks returned by you should enclosed in backticks\n\n`;
+    let prompt = `You are a helpful assistant that answers questions about open source Accord Project. You assist the user in working with TemplateMark, Concerto models and JSON data. Code blocks returned by you should be enclosed in backticks, the language names that you can use after three backticks are- "concerto","templatemark" and "json", suffix 'Apply' to the language name if it is a complete code block that can be used to replace the corresponding editor content, precisely, concertoApply, templatemarkApply and jsonApply. You must always try to return complete code block that can be applied to the editors. Concerto code, TemplateMark code and JSON data are supplied to TemplateEngine to produce the final output. For instance, a data field that is not in Concerto data model can't be in JSON data and therefore can't be used in TemplateMark you generate. Analyze the JSON data and Concerto model (if provided) carefully, only the fields with simple data types (String, Integer etc.) present in concept annotated with @template decorator can be directly accessed anywhere in the template. Other complex data fields that have custom concept declaration in the Concerto model and are represented as nested fields in JSON data, can only be used within {{#clause conceptName}} {{concept_property_name}} {{/clause}} tags. Therefore, in most cases you have to create a scope using clause tag in TemplateMark to access properties defined under a concept in Concerto. For enumerating through a list you can create a scope to access the properties in list items via {{#olist listName}} {{instancePropertyName}} {{/olist}} or {{#ulist listName}} {{instancePropertyName}} {{/ulist}}. For TemplateMark code, there's no such thing as 'this' keyword within list scope. Optional fields shouldn't be wrapped in an if or with block to check for their availability e.g. if Concerto model has age as optional don't wrap it in if block in TemplateMark. You can also use Typescript within TemplateMark by enclosing the Typescript code in {{% %}}, you must write all of the Typescript code within a single line enclosed in a single pair of opening {{% and closing %}}. You may use Typescript to achieve an objective in TemplateMark only if TemplateMark syntax makes doing something hard, the data objects from JSON are readily available within {{% %}} enclosed Typescript using direct access, e.g. {{% return order.orderLines %}}. For e.g., you could use TypeScript to render ordered/unordered primitive list types such as String[]. Keep your focus on generating valid output based on current editors' contents but if you make a change that isn't compatible with the content of existing editors, you must return the full code for those editors as well. You mustn't add any placeholder in TemplateMark which isn't in Concerto model and JSON data unless you modify the Concerto and JSON data to have that field at the appropriate place.\n\n`;
     return includeEditorContents(prompt, aiConfig, editorsContent);
   }
 };

src/ai-assistant/prompts.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import useAppStore from "../store/store";
 import { sendMessage, stopMessage } from "../ai-assistant/chatRelay";
+import CodeDiffPopup from "./CodeDiffPopup";
 
 export const AIChatPanel = () => {
   const [promptPreset, setPromptPreset] = useState<string | null>(null);
@@ -15,7 +16,21 @@ export const AIChatPanel = () => {
     editorAgreementData: state.editorAgreementData,
   }));
 
-  const { chatState, resetChat, aiConfig, setAIConfig, setAIConfigOpen, setAIChatOpen, textColor } = useAppStore.getState()
+  const {
+    chatState,
+    resetChat,
+    aiConfig,
+    setAIConfig,
+    setAIConfigOpen,
+    setAIChatOpen,
+    setEditorValue,
+    setTemplateMarkdown,
+    setEditorModelCto,
+    setModelCto,
+    setEditorAgreementData,
+    setData,
+    textColor
+  } = useAppStore.getState()
 
   const latestMessageRef = useRef<HTMLDivElement>(null);
 
@@ -105,64 +120,88 @@ export const AIChatPanel = () => {
     }
   };
 
-  const renderMessageContent = (content: string) => {
-    if (!content || !content.includes('```')) {
-      console.log("content is", content);
-      return (
-        <div className="text-sm prose prose-sm break-all max-w-none">
-          <ReactMarkdown
-            components={{
-              code: ({ children, className }) => <code className={`bg-gray-200 p-1 rounded-md before:content-[''] after:content-[''] ${className}`}>{children}</code>,
-          }}>
-            {content}
-          </ReactMarkdown>
-        </div>
-      );
-    }
+  const [showDiffPopup, setShowDiffPopup] = useState(false);
+  const [diffCodeProps, setDiffCodeProps] = useState({
+    newCode: "",
+    currentCode: "",
+    language: "",
+    onApply: (_code: string) => {}
+  });
 
-    const parts = [];
-    let key = 0;
+  const handleApplyCode = (code: string, language: string) => {
+    let currentCode = "";
+    let applyFunction = (_code: string) => {};
 
-    const segments = content.split('```');
-    
-    if (segments[0]) {
-      parts.push(
-        <div className="text-sm prose prose-sm max-w-none" key={key++}>
-          <ReactMarkdown>
-            {segments[0]}
-          </ReactMarkdown>
-        </div>
-      );
+    if (language === "concerto") {
+      currentCode = editorsContent.editorModelCto;
+      applyFunction = (code: string) => {
+        setEditorModelCto(code);
+        setModelCto(code);
+      };
+    } else if (language === "templatemark") {
+      currentCode = editorsContent.editorTemplateMark;
+      applyFunction = (code: string) => {
+        setEditorValue(code);
+        setTemplateMarkdown(code);
+      };
+    } else if (language === "json") {
+      currentCode = editorsContent.editorAgreementData;
+      applyFunction = (code: string) => {
+        setEditorAgreementData(code);
+        setData(code);
+      };
     }
-    
-    for (let i = 1; i < segments.length; i++) {
-      if (i % 2 === 1 && segments[i]) {
-        const firstLineBreak = segments[i].indexOf('\n');
-        let code = segments[i];
-        
-        if (firstLineBreak > -1) {
-          code = segments[i].substring(firstLineBreak + 1);
-        }
-        
-        parts.push(
-          <div key={key++} className="relative mt-2 mb-2">
-            <pre className="bg-gray-800 text-gray-100 p-3 rounded-lg text-xs overflow-x-auto">
-              {code.trim()}
-            </pre>
-          </div>
-        );
-      } else if (i % 2 === 0 && segments[i]) {
-        parts.push(
-          <div className="text-sm prose prose-sm max-w-none" key={key++}>
-            <ReactMarkdown>
-              {segments[i]}
-            </ReactMarkdown>
-          </div>
-        );
-      }
+
+    const normalize = (str: string) => str.trim();
+    if (normalize(currentCode) === normalize(code)) {
+      applyFunction(code);
+      return;
     }
-    
-    return parts;
+
+    setDiffCodeProps({
+      newCode: code,
+      currentCode,
+      language,
+      onApply: applyFunction
+    });
+    setShowDiffPopup(true);
+  };
+
+  const renderMessageContent = (content: string) => {
+    return (
+      <div className="text-sm prose prose-md break-all max-w-none">
+        <ReactMarkdown
+          components={{
+            code: ({ children, className }) => {
+              if (className === undefined) return <code className={`rounded-md`}>{children}</code>;
+              let language = ((className as string).match(/language-[^ ]*/)?.toString())?.split("-")[1] || "";
+              const isApplicable = ["concertoApply", "templatemarkApply", "jsonApply"].includes(language);
+              language = language.slice(0, -5)
+              const codeContent = children?.toString() || "";
+
+              return (
+                <div className="relative">
+                  {isApplicable && (
+                    <button
+                      onClick={() => handleApplyCode(codeContent, language)}
+                      className="sticky top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded text-xs hover:bg-blue-600 transition-colors flex items-center"
+                      title={`Apply to ${language} editor`}
+                    >
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M9 14L4 9L9 4" />
+                      <path d="M4 9H16C18.2091 9 20 10.7909 20 13C20 15.2091 18.2091 17 16 17H12" />
+                    </svg>
+                    </button>
+                  )}
+                  <code className={`rounded-md ${className} block p-4`}>{children}</code>
+                </div>
+              );
+            }
+          }}>
+          {content}
+        </ReactMarkdown>
+      </div>
+    );
   };
 
   useEffect(() => {
@@ -252,7 +291,7 @@ export const AIChatPanel = () => {
           </button>
         </div>
       </div>
-      <div className="w-full h-[calc(100%-3rem)] flex flex-col">
+      <div className="w-full h-[calc(100%-1rem)] flex flex-col">
         <div className="flex-1 overflow-y-auto mb-4 px-2 mt-4">
           <div className="space-y-2">
             {chatState.messages.length === 0 ? (
@@ -303,7 +342,7 @@ export const AIChatPanel = () => {
         <div className="flex flex-col gap-2">
             {promptPreset && (
             <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-indigo-600 bg-opacity-95 text-white rounded-lg self-start">
-                <span className="text-sm font-medium prose lg:prose-md">
+                <span className="text-sm font-medium">
                   {
                     promptPreset === "textToTemplate" ? "Text to TemplateMark" : "Create Concerto Model"
                   }
@@ -534,6 +573,15 @@ export const AIChatPanel = () => {
             </div>
         </div>
     </div>
+    {showDiffPopup && (
+      <CodeDiffPopup
+        newCode={diffCodeProps.newCode}
+        currentCode={diffCodeProps.currentCode}
+        language={diffCodeProps.language}
+        onApply={diffCodeProps.onApply}
+        onClose={() => setShowDiffPopup(false)}
+      />
+    )}
     </div>
   );
 }