> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# الصورة الرمزية للمساعد

> شخصية مساعد ثابتة ذات شكل وتعبير ولون وحجم قابلة للتهيئة.

## نظرة عامة

اعرض شخصية مساعد باستخدام شكل الجسم والوجه ولون لوحة الألوان والحجم. يعرض المكوّن القيم المقدّمة؛ ويتولى تطبيقك الاختيار والحفظ.

> [tab] Light
>
> [شخصية المساعد بجانب اسمها (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-assistantavatar--display\&viewMode=story\&globals=colorScheme:light)

> [tab] Dark
>
> [شخصية المساعد بجانب اسمها (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-assistantavatar--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-assistantavatar--display)

## استخدام

```tsx theme={null}
import { AssistantAvatar } from 'twenty-ui/components/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const AssistantLabel = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <AssistantAvatar shape="circle" face="default" color="blue" size={24} />
    <Text>Workspace assistant</Text>
  </Text>
);
```

## الخيارات المرئية

اختر الأشكال بشكل مستقل عن التعابير والألوان.

| خاصية | القيم | الإعداد الافتراضي |
| - | - | - |
| `shape` | `circle`, `cookie`, `cloud`, `clover`, `flower`, `burst`, `pill`, `arch`, `gem`, `hexagon` | `circle` |
| `face` | `default`, `happy`, `wink`, `surprised`, `sleepy`, `love` | `الإعداد الافتراضي` |
| `اللون` | `blue`, `sky`, `turquoise`, `green`, `yellow`, `orange`, `red`, `pink`, `purple`, `gray` | `أزرق` |
| `الحجم` | `14`, `16`, `20`, `24`, `40` بكسل | `24` |

يستخدم الجسم والوجه رموز النسق الخاصة بلوحة الألوان المحددة ويتبعان النسق الفاتح أو الداكن المحيط. عيّن `size` لشخصية مربعة. تستهدف السمات والأحداث الأصلية و`className` و`style` و`ref` عنصر span الخارجي؛ وتتجاوز الأنماط الصريحة أبعاده وإعدادات لوحة الألوان الافتراضية.

```tsx theme={null}
import { AssistantAvatar } from 'twenty-ui/components/data-display';

export const CustomAssistant = () => (
  <AssistantAvatar
    shape="cloud"
    face="happy"
    color="sky"
    size={40}
    aria-label="Workspace assistant"
  />
);
```

## إمكانية الوصول

تكون الشخصية زخرفية عندما لا يكون لها اسم متاح، كما في مثال الاستخدام المسمى. بالنسبة إلى شخصية مستقلة، وفّر `aria-label` أو `aria-labelledby`؛ وعندها يكشف الجذر عن دور الصورة. يبقى الجسم والوجه مخفيين عن التقنية المساعدة كي يُعلن عن الشخصية مرة واحدة.

عيّن `aria-hidden` صراحةً عندما تحتاج إلى تجاوز الإعداد الافتراضي المستند إلى الاسم، مثل إخفاء شخصية مسماة بجانب نص مرئي مكافئ.

ضع الشخصية داخل زر أو رابط مسمى عندما ترافق إجراءً ما. يتولى التطبيق عنصر التحكم وتسميته وسلوكه.

## الإزاحة

**aria-hidden** `Booleanish`

Explicitly hides or exposes the character. Takes precedence over the name-based default.

**aria-label** `string`

Accessible name for a standalone character. Adds the image role; omit it beside a visible name.

**aria-labelledby** `string`

ID of an element naming a standalone character. Adds the image role.

**className** `string`

CSS class applied to the span root.

**color** `"blue" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "sky" | "turquoise" | "yellow"` (default: blue)

Theme palette used for the body and face. Follows the surrounding light or dark theme.

**face** `"default" | "happy" | "love" | "sleepy" | "surprised" | "wink"` (default: default)

Expression displayed over the body.

**isAnimated** `boolean` (default: false)

Plays the selected expression's idle loop. Displays the static expression when the browser prefers reduced motion.

**shape** `"arch" | "burst" | "circle" | "cloud" | "clover" | "cookie" | "flower" | "gem" | "hexagon" | "pill"` (default: circle)

Body shape of the assistant character.

**size** `14 | 16 | 20 | 24 | 40` (default: 24)

Width and height in pixels: 14, 16, 20, 24, or 40.

**style** `CSSProperties`

Inline styles applied to the root. Explicit styles override its dimensions and palette defaults.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.