@app-studio/web 0.9.57 → 0.9.60

package/docs/components/ChatInput.mdx

@@ -156,6 +156,139 @@ export const ControlledChatInput = () => {
 };
 ```
 
+### **onFileUpload**
+Function to execute file upload. The parent component should provide this to handle the actual file upload logic.
+
+- **Type:** `(file: File) => void`
+- **Required:** `false`
+
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { UploadService } from 'src/services/api';
+
+export const FileUploadChatInput = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  
+  const uploadFileRequest = UploadService.useUploadControllerFileService({
+    onProgress: (p) => console.log('Progress:', p),
+    onSuccess: (data) => console.log('Success:', data),
+    onError: (err) => console.error('Error:', err),
+  });
+  
+  return (
+    <ChatInput 
+      onFileUpload={(file) => uploadFileRequest.run({ file })}
+      onSubmit={(message) => console.log(message)}
+      getPendingFiles={() => files}
+      clearPendingFiles={() => setFiles([])}
+    />
+  );
+};
+```
+
+### **onUploadProgress**
+Callback when file upload progress changes.
+
+- **Type:** `(progress: number) => void`
+- **Required:** `false`
+
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { UploadService } from 'src/services/api';
+
+export const UploadProgressChatInput = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  const [progress, setProgress] = useState(0);
+  
+  const uploadFileRequest = UploadService.useUploadControllerFileService({
+    onProgress: (p) => setProgress(p),
+    onSuccess: () => setProgress(0),
+    onError: () => setProgress(0),
+  });
+  
+  return (
+    <>
+      {progress > 0 && <div>Upload Progress: {progress}%</div>}
+      <ChatInput 
+        onFileUpload={(file) => uploadFileRequest.run({ file })}
+        onUploadProgress={(p) => console.log('Upload progress:', p)}
+        onSubmit={(message) => console.log(message)}
+        getPendingFiles={() => files}
+        clearPendingFiles={() => setFiles([])}
+      />
+    </>
+  );
+};
+```
+
+### **onUploadSuccess**
+Callback when file upload succeeds.
+
+- **Type:** `(data: any) => void`
+- **Required:** `false`
+
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { UploadService } from 'src/services/api';
+
+export const UploadSuccessChatInput = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  
+  const uploadFileRequest = UploadService.useUploadControllerFileService({});
+  
+  return (
+    <ChatInput 
+      onFileUpload={(file) => uploadFileRequest.run({ file })}
+      onUploadSuccess={(data) => {
+        console.log('Upload successful:', data);
+        // Perform additional actions on success
+      }}
+      onSubmit={(message) => console.log(message)}
+      getPendingFiles={() => files}
+      clearPendingFiles={() => setFiles([])}
+    />
+  );
+};
+```
+
+### **onUploadError**
+Callback when file upload fails.
+
+- **Type:** `(error: any) => void`
+- **Required:** `false`
+
+```tsx
+import React, { useState } from 'react';
+import { ChatInput } from '@app-studio/web';
+import { UploadService } from 'src/services/api';
+
+export const UploadErrorChatInput = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  const [error, setError] = useState<string>('');
+  
+  const uploadFileRequest = UploadService.useUploadControllerFileService({});
+  
+  return (
+    <>
+      {error && <div style={{ color: 'red' }}>{error}</div>}
+      <ChatInput 
+        onFileUpload={(file) => uploadFileRequest.run({ file })}
+        onUploadError={(err) => {
+          console.error('Upload failed:', err);
+          setError('Failed to upload file. Please try again.');
+        }}
+        onSubmit={(message) => console.log(message)}
+        getPendingFiles={() => files}
+        clearPendingFiles={() => setFiles([])}
+      />
+    </>
+  );
+};
+```
+
 ### **hideAttachments**
 Whether to hide the attachment button.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.57",
+  "version": "0.9.60",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [
@@ -46,6 +46,7 @@
     "page-imports": "ts-node scripts/generate-page-imports.ts",
     "create-pages": "npm run create-indices && ts-node scripts/create-pages.ts && npm run page-imports",
     "validate-docs": "node scripts/validate-docs.js",
+    "docs:app-studio": "rm -rf docs/app-studio && mkdir -p docs/app-studio && cp -R node_modules/app-studio/docs/* docs/app-studio",
     "api:local": "react-api  --useUnionTypes --input http://localhost:3000/docs/swagger.json --output ./src/services/api  && prettier --write ./src/services/api"
   },
   "eslintConfig": {
@@ -111,7 +112,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
-    "app-studio": "^0.6.47",
+    "app-studio": "^0.6.52",
     "async-mutex": "^0.5.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",