@app-studio/web 0.9.39 → 0.9.43

package/dist/bot/Bot.d.ts

@@ -0,0 +1,15 @@
+import { AiService } from './ai/ai.service';
+import { ProviderType } from './ai/ai.config';
+import { FileHandler } from './FileHandler';
+export declare class Bot {
+    readonly aiService: AiService;
+    readonly fileHandler: FileHandler;
+    private readonly cache;
+    private readonly cacheKey;
+    constructor(cacheKey: string);
+    generatePropsData(componentFolder: string, componentName: string, model?: string, provider?: ProviderType): Promise<any>;
+    isValidPropsStructure(data: any): boolean;
+    isObject(value: any): boolean;
+    generateMarkdown(componentFolder: string, componentName: string, propsData: any, // Accept generated props data
+    outputFilePath: string): Promise<void>;
+}

package/dist/bot/Cache.d.ts

@@ -0,0 +1,13 @@
+export declare class Cache {
+    private readonly cacheDirectory;
+    constructor(cacheDirectory?: string);
+    generateCacheKey(prompt: string): string;
+    getFromCache(cacheKey: string): any | null;
+    getJsonFromCache(cacheKey: string): any;
+    saveJsonToCache(cacheKey: string, content: any): void;
+    saveToCache(cacheKey: string, content: string): void;
+    saveEachJsonToCache(cacheKey: string, content: any, fileNameKey: string): void;
+    cacheExist(cacheKey: string): boolean;
+    cacheFolderExist(cacheKey: string): boolean;
+    createFile(cacheKey: string, fileContent?: string, fileName?: string): Promise<string>;
+}

package/dist/bot/Config.d.ts

@@ -0,0 +1,13 @@
+/**
+API_CONFIG : Un objet contenant les paramètres de configuration pour l'API OpenAI, tels que la clé API et l'organisation. Ces valeurs peuvent être définies directement ou récupérées à partir de variables d'environnement.
+APPLICATION_SETTINGS : Un objet pour les paramètres généraux de l'application. Vous pouvez inclure ici des configurations telles que le mode de débogage, les paramètres de journalisation, etc.
+*/
+export declare const API_CONFIG: {
+    openaiApiKey: string;
+    openaiOrganization: string;
+    defaultModel: string;
+};
+export declare const APPLICATION_SETTINGS: {
+    debugMode: boolean;
+    cacheDirectory: string;
+};

package/dist/bot/ContentFetcher.d.ts

@@ -0,0 +1,9 @@
+export declare class ContentFetcher {
+    private readonly cache;
+    private readonly cacheKey;
+    constructor(cacheKey: string);
+    private static isLinkValid;
+    private fetchAndProcessContent;
+    processAllLinks(links: string[]): Promise<void>;
+    private urlToMarkdown;
+}

package/dist/bot/DocuCode.d.ts

@@ -0,0 +1,19 @@
+export declare class DocuCode {
+    private readonly fileHandler;
+    private readonly cache;
+    private readonly cacheKey;
+    private readonly aiService;
+    private selectedModel;
+    private selectedProvider;
+    constructor(cacheKey: string, model?: string, provider?: string);
+    commentCodeFile(filePath: string): Promise<void>;
+    processComments(filePath: string, code: string, commentsJson: any): Promise<void>;
+    removeCommentsAndCleanFile(filePath: string): Promise<void>;
+    processDirectory(dirPath: string): Promise<any>;
+    splitArrayToJSON(code: string): {
+        line: number;
+        code: string;
+    }[];
+    insertComments(code: string, comments: any[]): string;
+    compareStrings(line: string, codeSnippet: string): boolean;
+}

package/dist/bot/FileHandler.d.ts

@@ -0,0 +1,39 @@
+export declare class FileHandler {
+    /**
+     * Reads the content of a file as a string.
+     * @param filePath Path to the file
+     * @returns File content as a string
+     */
+    readFile(filePath: string): string;
+    /**
+     * Reads all filenames in a directory, creating the directory if it doesn't exist.
+     * @param directory Directory path
+     * @returns Array of filenames
+     */
+    readFiles(directory: string): string[];
+    /**
+     * Writes content to a file, creating the parent directory if it doesn't exist.
+     * @param filePath Path to the file
+     * @param content Content to write
+     */
+    writeFile(filePath: string, content: string): void;
+    /**
+     * Writes content to a file directly without checking or creating directories.
+     * @param filePath Path to the file
+     * @param content Content to write
+     */
+    writeFileDirect(filePath: string, content: string): void;
+    /**
+     * Checks if a file or directory exists.
+     * @param filePath Path to check
+     * @returns True if the path exists, false otherwise
+     */
+    pathExists(filePath: string): boolean;
+    /**
+     * Reads and parses a JSON file.
+     * @param filePath Path to the JSON file
+     * @returns Parsed JSON object
+     * @throws Error if the file doesn't exist or contains invalid JSON
+     */
+    readJsonFile(filePath: string): any;
+}

package/dist/bot/ai/AnthropicConnector.d.ts

@@ -0,0 +1,6 @@
+export declare class AnthropicConnector {
+    private readonly apiKey;
+    private readonly anthropic;
+    constructor(apiKey: string);
+    sendChatMessage(model: string, messages: any[], props?: {}): Promise<any>;
+}

package/dist/bot/ai/GeminiConnector.d.ts

@@ -0,0 +1,7 @@
+export declare class GeminiConnector {
+    private readonly apiKey;
+    private readonly googleAI;
+    constructor(apiKey: string);
+    sendChatMessage(GeminiModel: string, messages: any[], props?: {}, json?: boolean): Promise<string>;
+    token(GeminiModel: string, prompt: string, props?: {}): Promise<number>;
+}

package/dist/bot/ai/GroqConnector.d.ts

@@ -0,0 +1,7 @@
+export declare class GroqConnector {
+    private readonly apiKey;
+    private readonly groq;
+    constructor(apiKey: string);
+    sendChatMessage(model: string, messages: any[], props?: {}, json?: boolean): Promise<any>;
+    token(messages: any[]): Promise<number>;
+}

package/dist/bot/ai/HuggingFaceConnector.d.ts

@@ -0,0 +1,6 @@
+export declare class HuggingFaceConnector {
+    private readonly apiKey;
+    private readonly hf;
+    constructor(apiKey: string);
+    sendChatMessage(model: string, messages: any[], props?: {}): Promise<string | undefined>;
+}

package/dist/bot/ai/OpenAIConnector.d.ts

@@ -0,0 +1,11 @@
+import { TiktokenModel } from 'tiktoken';
+export declare class OpenAIConnector {
+    private readonly openai;
+    constructor({ apiKey, baseURL, organization, }: {
+        apiKey: string;
+        organization?: string;
+        baseURL?: string;
+    });
+    sendChatMessage(model: string, messages: any[], props?: {}, json?: boolean): Promise<any>;
+    token(model: TiktokenModel, messages: any[]): Promise<any>;
+}

package/dist/bot/ai/ReplicateConnector.d.ts

@@ -0,0 +1,7 @@
+export declare class ReplicateConnector {
+    private readonly apiKey;
+    private readonly replicate;
+    constructor(apiKey: string);
+    sendChatMessage(model: string, messages: any[], props?: {}): Promise<any>;
+    removeBackground(image: string): Promise<any>;
+}

package/dist/bot/ai/SambaNovaConnector.d.ts

@@ -0,0 +1,6 @@
+export declare class SambaNovaConnector {
+    private readonly apiKey;
+    private readonly openai;
+    constructor(apiKey: string);
+    sendChatMessage(model: string, messages: any[], props?: {}, json?: boolean): Promise<any>;
+}

package/dist/bot/ai/ai.config.d.ts

@@ -0,0 +1,12 @@
+export declare type ModelInfos = {
+    creditCost: number;
+    tokenLimit: number;
+    cost?: {
+        prompt_token: number;
+        completion_token: number;
+    };
+    provider: string;
+};
+export declare type ProviderType = 'groq' | 'google' | 'openai' | 'huggingFace' | 'replicate' | 'openrouter' | 'anthropic' | 'deepseek' | 'mistralai' | 'sambaNova';
+export declare const Providers: ProviderType[];
+export declare const MODEL_INFO: Record<string, ModelInfos>;

package/dist/bot/ai/ai.service.d.ts

@@ -0,0 +1,36 @@
+import { ProviderType } from './ai.config';
+import { OpenAIConnector } from './OpenAIConnector';
+import 'dotenv/config';
+export declare const DEFAULT_IMAGE_MODEL = "black-forest-labs/flux-schnell";
+export declare const MODEL_IMAGE_CREDIT_COST = 2;
+export declare class AiService {
+    private models;
+    private config;
+    private readonly MAX_RETRIES;
+    private readonly RETRY_DELAY;
+    openRouter: OpenAIConnector;
+    constructor();
+    private addLanguageInstruction;
+    getProvider(provider: ProviderType, useOpenRouter?: boolean): any;
+    /**
+     * Simple delay utility function.
+     */
+    private delay;
+    /**
+     * Enhanced send method with improved error handling and account verification.
+     */
+    send({ model, provider, temperature, messages, props, options, json, }: {
+        model: string;
+        provider: ProviderType;
+        temperature?: Number;
+        messages: any[];
+        props?: {};
+        options?: {
+            retries?: number;
+            language?: string;
+        };
+        json?: boolean;
+    }): Promise<string>;
+    token(model: string, provider: ProviderType, messages: any[] | string, props?: {}): Promise<string>;
+    handleTokenLimitError(error: any): boolean;
+}

package/dist/bot/data.d.ts

@@ -0,0 +1,19 @@
+export interface Sections {
+    [sectionTitle: string]: Chapter[];
+}
+export interface Chapter {
+    title: string;
+    subchapters: Subchapter[];
+}
+export interface Subchapter {
+    subtitle: string;
+    minWordCount: number;
+    maxWordCount: number;
+    summary: string;
+    points: string[];
+}
+export interface NewsletterSettings {
+    language: string;
+    tone: string;
+    style: string;
+}

package/dist/bot/extractors.d.ts

@@ -0,0 +1,8 @@
+/**
+extractJsonCode : Extrait un bloc de code JSON d'une réponse. Utile si la réponse contient des blocs de code formatés.
+extractTextResponse : Nettoie une réponse pour ne garder que le texte, en supprimant les blocs de code et les formattages spéciaux.
+extractKeyValuePairs : Extrait des paires clé-valeur d'une réponse. Cette fonction peut être utile pour traiter des réponses formatées comme des listes de propriétés.
+ */
+export declare function extractJsonCode(response: string): any;
+export declare const extractTextResponse: (response: string) => string;
+export declare const extractKeyValuePairs: (response: string) => Record<string, string>;

package/dist/bot/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bot/prompt/1-project.d.ts

@@ -0,0 +1 @@
+export declare const ProjectPrompt: () => string;

package/dist/bot/prompt/2-response.d.ts

@@ -0,0 +1 @@
+export declare const RespondPrompt: (props: string, view: string, type?: string | undefined) => string;

package/dist/bot/prompt/3-comment.d.ts

@@ -0,0 +1 @@
+export declare const CommentPrompt: (componentName: string, fileName: string, codeContent: string) => string;

package/docs/components/Accordion.mdx

@@ -1,158 +1,111 @@
 # Accordion
 
-A component that displays collapsible content panels for presenting information in a limited amount of space.
+Organizes content into collapsible sections for efficient space management.
 
 ### **Import**
-  ```tsx
-  import { Accordion } from '@app-studio/web';
-  ```
+```tsx
+import { Accordion } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
+import { Accordion } from '@app-studio/web';
+import { Text, Vertical } from 'app-studio';
 
 export const DefaultAccordion = () => {
   return (
-    <Accordion>
-      <Accordion.Item id="item-1">
-        <Accordion.Header>
-          <Text fontWeight="bold">What is React?</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-      
-      <Accordion.Item id="item-2">
-        <Accordion.Header>
-          <Text fontWeight="bold">What are React Hooks?</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            Hooks are functions that let you "hook into" React state and lifecycle features from function components.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-```
-
-### **Multiple**
-Allow multiple items to be expanded at once.
+    <Vertical gap={20} width="100%" maxWidth={600}>
+      <Text marginBottom={10}>Default Accordion (Single)</Text>
+      <Accordion type="single" defaultValue="item-1">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">What is React?</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              React is a JavaScript library for building user interfaces. It is
+              maintained by Facebook and a community of individual developers
+              and companies. React can be used as a base in the development of
+              single-page or mobile applications.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
 
-```tsx
-import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">What are React Hooks?</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              Hooks are functions that let you hook into React state and
+              lifecycle features from function components. Hooks dont work
+              inside classes — they let you use React without classes.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
 
-export const MultipleAccordion = () => {
-  return (
-    <Accordion allowMultiple defaultExpandedItems={['item-1']}>
-      <Accordion.Item id="item-1">
-        <Accordion.Header>
-          <Text fontWeight="bold">First Item (Initially Expanded)</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This item is initially expanded. You can expand multiple items at once in this accordion.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-      
-      <Accordion.Item id="item-2">
-        <Accordion.Header>
-          <Text fontWeight="bold">Second Item</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This is the second item. Try expanding this while the first item is still open.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">What is JSX?</Text>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Text>
+              JSX is a syntax extension for JavaScript. It was written to be
+              used with React and looks a lot like HTML. Because JSX is
+              JavaScript, you can use variables inside it.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </Vertical>
   );
 };
 ```
 
-### **Variants**
-Different visual styles for the accordion.
+### **collapsible**
+If true, allows all accordion items to be collapsed, meaning no item has to be open.
+
+- **Type:** `boolean`
+- **Default:** `false`
 
 ```tsx
 import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
+import { Accordion } from '@app-studio/web';
+import { Text, Vertical } from 'app-studio';
 
-export const AccordionVariants = () => {
+export const CollapsibleAccordion = () => {
   return (
-    <>
-      <Accordion variant="outline">
-        <Accordion.Item id="outline-1">
-          <Accordion.Header>
-            <Text fontWeight="bold">Outline Variant</Text>
-          </Accordion.Header>
+    <Vertical gap={20} width="100%" maxWidth={600}>
+      <Text marginBottom={10}>Collapsible Accordion (Single)</Text>
+      <Accordion type="single" defaultValue="item-1" collapsible>
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Question 1</Text>
+          </Accordion.Trigger>
           <Accordion.Content>
             <Text>
-              This is the content for the outline variant accordion.
+              This is the answer to question 1. Since `collapsible` is true, you
+              can click the trigger again to close this item, even though its
+              the only one.
             </Text>
           </Accordion.Content>
         </Accordion.Item>
-      </Accordion>
-      
-      <Accordion variant="filled">
-        <Accordion.Item id="filled-1">
-          <Accordion.Header>
-            <Text fontWeight="bold">Filled Variant</Text>
-          </Accordion.Header>
+
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>
+            <Text fontWeight="bold">Question 2</Text>
+          </Accordion.Trigger>
           <Accordion.Content>
             <Text>
-              This is the content for the filled variant accordion.
+              This is the answer to question 2. Only one item can be open, but
+              it can be closed entirely.
             </Text>
           </Accordion.Content>
         </Accordion.Item>
       </Accordion>
-    </>
+    </Vertical>
   );
 };
 ```
 
-### **Disabled**
-Disable specific accordion items.
-
-```tsx
-import React from 'react';
-import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
-
-export const DisabledAccordion = () => {
-  return (
-    <Accordion>
-      <Accordion.Item id="regular-1">
-        <Accordion.Header>
-          <Text fontWeight="bold">Regular Item</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This is a regular accordion item that can be expanded and collapsed.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-      
-      <Accordion.Item id="disabled-1" isDisabled>
-        <Accordion.Header>
-          <Text fontWeight="bold">Disabled Item</Text>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Text>
-            This content won't be accessible because the item is disabled.
-          </Text>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-```

package/docs/components/Alert.mdx

@@ -1,16 +1,16 @@
 # Alert
 
-Displays an alert with optional icon and customizable views.
+Displays important messages to users with various styles and states.
 
 ### **Import**
-  ```tsx
-  import { Alert } from '@app-studio/web';
-  ```
+```tsx
+import { Alert } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Alert } from '../Alert';
+import { Alert } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   return (
@@ -20,37 +20,41 @@ export const DefaultDemo = () => {
     />
   );
 };
-
 ```
 
 ### **icon**
-Optional icon property, expecting a React node element
+Custom icon element to display in the alert, overriding the default variant-based icon.
+
+- **Type:** `ReactNode`
 
 ```tsx
 import React from 'react';
-import { EditIcon } from '../../Icon/Icon';
-import { Alert } from '../Alert';
+import { EditIcon } from '@app-studio/web';
+import { Alert } from '@app-studio/web';
 
 export const IconDemo = () => {
   return (
     <Alert
       title="Heads up!"
       description="You can add components to your app using the cli."
-      icon={<EditIcon size={24} color="black" />}
+      icon={<EditIcon widthHeight={24} color="black" />}
     />
   );
 };
-
 ```
 
 ### **variant**
-Optional variant property to determine the style of the alert
+Determines the visual style and semantic meaning of the alert.
+
+- **Type:** `string`
+- **Default:** `default`
+- **Possible Values:** `default, info, success, error, warning`
 
 ```tsx
 import React from 'react';
 import { Horizontal } from 'app-studio';
-import { Alert } from '../Alert';
-import { Variant } from '../Alert/Alert.type';
+import { Alert } from '@app-studio/web';
+import { Variant } from '@app-studio/web';
 
 export const VariantDemo = () => (
   <Horizontal gap={10}>
@@ -64,60 +68,5 @@ export const VariantDemo = () => (
     ))}
   </Horizontal>
 );
-
-```
-
-### **styles**
-Optional styles property to apply custom styles to the alert component
-
-```tsx
-import React from 'react';
-import { Alert } from '../Alert';
-
-export const StylesDemo = () => (
-  <Alert
-    title={'Heads Up!'}
-    description={'You can add components to your app using the cli.'}
-    views={{
-      container: { backgroundColor: 'black' },
-      title: { color: 'white' },
-      description: { color: 'white' },
-      icon: { color: 'white' },
-    }}
-  />
-);
-
-```
-
-### **Theme Mode Support**
-The Alert component supports both light and dark themes through the `themeMode` prop.
-
-```tsx
-import React from 'react';
-import { Alert } from '../Alert';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
-
-export const DarkModeDemo = () => {
-  return (
-    <Vertical gap={24}>
-      <Text fontSize={20} fontWeight="bold">Light Mode Alerts</Text>
-      <Alert
-        themeMode="light"
-        variant="info"
-        title="Info Alert (Light)"
-        description="This is an info alert in light mode."
-      />
-
-      <Text fontSize={20} fontWeight="bold" marginTop={40}>Dark Mode Alerts</Text>
-      <Alert
-        themeMode="dark"
-        variant="info"
-        title="Info Alert (Dark)"
-        description="This is an info alert in dark mode."
-      />
-    </Vertical>
-  );
-};
 ```