fix: url usage on vision was not working

chore: changes on vision prompt
chore: package upgrades

package.json

@@ -36,34 +36,34 @@
     "version": "yarn build"
   },
   "dependencies": {
-    "axios": "1.6.1",
+    "axios": "1.6.2",
     "cfonts": "3.2.0",
     "commander": "11.1.0",
     "dotenv": "16.3.1",
     "emmet": "2.4.6",
     "handlebars": "4.7.8",
     "inquirer": "9.2.12",
     "js-beautify": "1.14.11",
-    "langchain": "0.0.184",
+    "langchain": "0.0.195",
     "node-html-parser": "6.1.11",
     "ora": "7.0.1"
   },
   "devDependencies": {
     "@types/inquirer": "9.0.7",
     "@types/js-beautify": "1.14.3",
-    "@types/node": "20.9.0",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
+    "@types/node": "20.9.3",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
     "@vercel/ncc": "0.38.1",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-unicorn": "49.0.0",
     "husky": "8.0.3",
     "is-ci": "3.0.1",
-    "lint-staged": "15.0.2",
-    "tsx": "4.0.0",
-    "type-fest": "4.7.1",
-    "typescript": "5.2.2"
+    "lint-staged": "15.1.0",
+    "tsx": "4.2.0",
+    "type-fest": "4.8.2",
+    "typescript": "5.3.2"
   },
   "keywords": [
     "cli-tool",

src/features/AI/helper.ts

@@ -16,7 +16,7 @@ export const defaultBaseConfig: BaseLanguageModelParams = {
 
 export function extractCodeBlock(response: string) {
   const codeBlockRegex =
-    /```(?:typescript|javascript|react)?\n([\S\s]*?)\n```/g;
+    /```(?:typescript|javascript|react|tsx|jsx)?\n([\S\s]*?)\n```/g;
   const codeBlocks = [];
   let match;
 
@@ -61,22 +61,25 @@ export function getComponentCreationViaVisionPrompt({
   componentName: string;
   styleLibrary: string;
 }) {
-  return `
-    Create functional react component with these information on ${tsOrJs} from image.
-
-    Just return ${tsOrJs} code to me, don't return any additional information with code. I will handle it. I also don't need any information about how to import the component.
-
-    - component description: '${componentDescription}'
-    - component name: '${componentName}'
-    - it's using '${styleLibrary}' library for creating component.
+  const styleLibraryStr = styleLibrary
+    ? `${styleLibrary} library`
+    : "inline css styling";
 
-    If the library is none, dont use any library.
-
-    Please include error handling, loading states, and comments within the code for clarity. Prefer functional components with hooks for state management over class components. Ensure the code is modular and easily testable.
-
-    If it's typescript, Include type definitions for all props and state objects, and use async/await for asynchronous operations. If it's javascript, use PropTypes for all props and state objects, and use promises for asynchronous operations. If you create props variable or interface, export that variable.
-
-    Before sending response, please verify the code that you created. If it's not correct, please send the correct code.
+  return `
+    As an expert developer in React, CSS, and ${styleLibraryStr}, create a '${componentName}' component for ${componentDescription}. Use ${tsOrJs} for creating component. Follow these guidelines closely:
+
+    1. The component must replicate the design in the provided image exactly, including layout and styling details.
+    2. Pay attention to background color, text color, font size, font family, padding, margin, and borders. Match these exactly to the image.
+    3. Use the exact text from the image in the component.
+    4. Write full CSS inline, without creating additional files. You may use any standard font.
+    5. Avoid placeholder comments. Instead, write complete code for each part of the component. you can repeat elements as needed to match the provided image.
+    6. For any images, use placeholders from https://placehold.co. Include descriptive alt text for each image placeholder.
+    7. Implement error handling and loading states. Add clear comments for code clarity.
+    8. Prefer functional components with hooks for state management. Ensure the component is modular and testable.
+    9. Add comments to the code for clarity to other developers.
+    10. Valid the code that you created. If it's not correct, please send the correct code.
+
+    Return only the full, complete code of the component.
   `;
 }
 

src/features/AI/index.ts

@@ -25,6 +25,7 @@ import {
   callAgentForStorybook as ollamaCallAgentForStorybook,
   callAgentForTesting as ollamaCallAgentForTesting,
 } from "./models/ollama/ollama.helper";
+import { OpenAITypes } from "./models/openAI/openai.types";
 
 export { questions } from "./questions";
 export { defaultSettings } from "./interfaces";
@@ -90,11 +91,11 @@ export async function runPlugin({
   switch (aiTool) {
     case AITools.openAI: {
       switch (aiAnswers.openAIType) {
-        case "text": {
+        case OpenAITypes.text: {
           response = await openAICallAgent(reqData);
           break;
         }
-        case "vision": {
+        case OpenAITypes.vision: {
           response = await callAgentViaVision(reqData);
           break;
         }
@@ -110,7 +111,9 @@ export async function runPlugin({
   log("AI response:", response);
 
   spinner.succeed("AI answer received");
-  createFile(allAnswers, aiAnswers.isTS ? ".tsx" : ".jsx", response as string);
+  createFile(allAnswers, aiAnswers.isTS ? ".tsx" : ".jsx", response as string, {
+    noFormat: true,
+  });
 
   if (aiAnswers.aiCreateStorybook) {
     const spStorybook = ora({

src/features/AI/models/openAI/openai.helper.ts

@@ -32,12 +32,17 @@ export async function createVisionPrompt(
       type: "image_url"!,
       image_url: {
         url: `data:image/jpeg;base64,${imageData.toString("base64")}`,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        detail: "high",
       },
     };
   } else {
     data = {
       type: "image_url",
-      image_url: imagePath,
+      image_url: {
+        url: imagePath,
+      },
     };
   }