mirror of
https://github.com/crewAIInc/crewAI.git
synced 2026-07-01 21:28:10 +00:00
a237ebabba
* feat: adopt directory-based docs versioning with Edge channel Switch docs.crewai.com from navigation-only versioning (every version selector entry rendered the same docs/<lang>/* source files) to Mintlify's directory-based versioning so each version selector entry renders its own snapshot. Add an "Edge" channel under docs/edge/<lang>/* that always reflects main HEAD for unreleased work, eliminating pre-release leakage onto frozen release labels. External links to canonical /<lang>/* URLs are preserved via wildcard redirects that always land on the current default version. Layout: - docs/edge/<lang>/* rolling source (you edit here) - docs/edge/enterprise-api.*.yaml - docs/v<X.Y.Z>/<lang>/* frozen, immutable snapshots - docs/v<X.Y.Z>/enterprise-api.*.yaml - docs/images/ shared, append-only - docs/docs.json nav + redirects URLs follow the Mintlify-idiomatic shape: /edge/<lang>/<page> for Edge, /v<X.Y.Z>/<lang>/<page> for every frozen snapshot. The wildcard redirects /<lang>/:slug* -> /<default>/<lang>/:slug* keep stale links working, and every freeze rewrites them (plus all per-section/per-page redirects) so destinations always resolve to the current default without depending on a second redirect hop. Release flow integration (devtools release): - New module crewai_devtools.docs_versioning.freeze() materialises docs/v<X.Y.Z>/ from docs/edge/, rewrites openapi: refs inside the snapshot, inserts the version into every language block in docs.json, and refreshes all redirect destinations. - _update_docs_and_create_pr() in cli.py now calls that freeze during Phase 2 of devtools release. Edge changelogs are updated first (so the snapshot freeze picks them up), then the snapshot is staged alongside docs.json, branched as docs/freeze-v<X.Y.Z>, and the PR is titled [docs-freeze] docs: snapshot and changelog for v<X.Y.Z> — the title prefix the new CI guard reads. - The PR still gates tag, GitHub release, PyPI publish, and the enterprise release as before; no new PRs are added. - Pre-releases (1.X.YaN, 1.X.YbN, ...) skip the snapshot — they ride Edge — and the docs PR title omits the [docs-freeze] prefix. - docs_check (AI-generated docs scaffolding) writes to docs/edge/<lang>/* so newly-generated unreleased docs land in Edge and never accidentally touch a frozen snapshot. Migration scripts (one-shot): - scripts/docs/freeze_historical_versions.py reconstructs all 16 historical snapshots (v1.10.0 .. v1.14.7) from git tags via git archive | tar, rewriting openapi: MDX refs so each snapshot reads its own enterprise-api YAML rather than the live one. - scripts/docs/prefix_version_paths.py one-shot-migrates docs.json: rewrites every page path in 16 versioned blocks to point under docs/v<X.Y.Z>/, inserts a new Edge entry per language, tags v1.14.7 as Latest (default), prunes pages whose target file doesn't exist in the snapshot (e.g. docs/ar/ didn't exist before v1.12.0), and writes the wildcard + per-section redirects. - scripts/docs/freeze_current_edge.py is now a thin CLI wrapper around docs_versioning.freeze for manual one-off freezes (e.g. retroactively snapshotting a forgotten release). CI guards (.github/workflows/docs-snapshots.yml): - Frozen snapshots under docs/v[0-9]*/ are immutable; only PRs whose title contains [docs-freeze] (i.e. release-cut PRs generated by devtools release or the manual wrapper) may modify them. - Images under docs/images/ are append-only since snapshots share a single image directory. Deleting or renaming an image breaks every historical snapshot that still references it. Restored docs/images/crewai-otel-export.png from PR #3673; it was deleted in PR #4908 but v1.10.0 / v1.10.1 snapshots still reference it. Restoring instead of editing the snapshots preserves historical rendering fidelity and validates the new append-only rule retroactively. Tests: - lib/devtools/tests/test_docs_versioning.py covers the freeze: file copy, openapi rewrite, version insertion, default demotion, redirect upserts, per-section redirect rewriting, idempotency, and invalid inputs. Verified locally with mintlify broken-links: 0 broken links across the full site (Edge + 16 frozen versions, 4 locales). AGENTS.md (repo root) is the contributor guide for the new model; RELEASING.md is the release-cut runbook; README's Contribution section links to both. Co-authored-by: Cursor <cursoragent@cursor.com> * style: resolve linter issues --------- Co-authored-by: Cursor <cursoragent@cursor.com>
113 lines
3.6 KiB
Plaintext
113 lines
3.6 KiB
Plaintext
---
|
|
title: "تصدير مكون React"
|
|
description: "تعلم كيفية تصدير ودمج مكونات React من CrewAI AMP في تطبيقاتك"
|
|
icon: "react"
|
|
mode: "wide"
|
|
---
|
|
|
|
يشرح هذا الدليل كيفية تصدير طواقم CrewAI AMP كمكونات React ودمجها في تطبيقاتك.
|
|
|
|
## تصدير مكون React
|
|
|
|
<Steps>
|
|
<Step title="تصدير المكون">
|
|
انقر على القائمة (ثلاث نقاط على يمين طاقمك المنشور) واختر خيار التصدير واحفظ الملف محلياً. سنستخدم `CrewLead.jsx` في مثالنا.
|
|
|
|
<Frame>
|
|
<img src="/images/enterprise/export-react-component.png" alt="تصدير مكون React" />
|
|
</Frame>
|
|
</Step>
|
|
|
|
</Steps>
|
|
|
|
## إعداد بيئة React
|
|
|
|
لتشغيل مكون React هذا محلياً، ستحتاج لإعداد بيئة تطوير React ودمج هذا المكون في مشروع React.
|
|
|
|
<Steps>
|
|
<Step title="تثبيت Node.js">
|
|
- حمّل وثبّت Node.js من الموقع الرسمي: https://nodejs.org/
|
|
- اختر إصدار LTS (الدعم طويل المدى) للاستقرار.
|
|
</Step>
|
|
|
|
<Step title="إنشاء مشروع React جديد">
|
|
- افتح Command Prompt أو PowerShell
|
|
- انتقل إلى المجلد الذي تريد إنشاء مشروعك فيه
|
|
- شغّل الأمر التالي لإنشاء مشروع React جديد:
|
|
|
|
```bash
|
|
npx create-react-app my-crew-app
|
|
```
|
|
- انتقل إلى مجلد المشروع:
|
|
|
|
```bash
|
|
cd my-crew-app
|
|
```
|
|
</Step>
|
|
|
|
<Step title="تثبيت الاعتماديات اللازمة">
|
|
```bash
|
|
npm install react-dom
|
|
```
|
|
</Step>
|
|
|
|
<Step title="إنشاء مكون CrewLead">
|
|
- انقل الملف المُحمّل `CrewLead.jsx` إلى مجلد `src` في مشروعك.
|
|
</Step>
|
|
|
|
<Step title="تعديل App.js لاستخدام مكون CrewLead">
|
|
- افتح `src/App.js`
|
|
- استبدل محتوياته بشيء مثل هذا:
|
|
|
|
```jsx
|
|
import React from 'react';
|
|
import CrewLead from './CrewLead';
|
|
|
|
function App() {
|
|
return (
|
|
<div className="App">
|
|
<CrewLead baseUrl="YOUR_API_BASE_URL" bearerToken="YOUR_BEARER_TOKEN" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
- استبدل `YOUR_API_BASE_URL` و`YOUR_BEARER_TOKEN` بالقيم الفعلية لـ API.
|
|
</Step>
|
|
|
|
<Step title="بدء خادم التطوير">
|
|
- في مجلد مشروعك، شغّل:
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
- سيبدأ خادم التطوير، ويجب أن يفتح متصفح الويب الافتراضي تلقائياً على `http://localhost:3000`، حيث سترى تطبيق React يعمل.
|
|
</Step>
|
|
|
|
</Steps>
|
|
|
|
## التخصيص
|
|
|
|
يمكنك بعد ذلك تخصيص `CrewLead.jsx` لإضافة اللون والعنوان وغيرها.
|
|
|
|
<Frame>
|
|
<img
|
|
src="/images/enterprise/customise-react-component.png"
|
|
alt="تخصيص مكون React"
|
|
/>
|
|
</Frame>
|
|
<Frame>
|
|
<img
|
|
src="/images/enterprise/customise-react-component-2.png"
|
|
alt="تخصيص مكون React"
|
|
/>
|
|
</Frame>
|
|
|
|
## الخطوات التالية
|
|
|
|
- خصّص تنسيق المكون ليتوافق مع تصميم تطبيقك
|
|
- أضف خصائص إضافية للتهيئة
|
|
- ادمج مع إدارة حالة تطبيقك
|
|
- أضف معالجة الأخطاء وحالات التحميل
|