https://neobrutalism.com/he/blocks/ai/ai-chat-assistant-interface
ממשק צ'אט עוזר AI
בינה מלאכותית · Pro source
משטח צ'אט שלם בקובץ אחד: סרגל כותרת עם פקדים מהירים, שרשור גלילה של בועות משתמש ועוזר ששומר על מיקום הגלילה שלו, חיווי הקלדה של שלוש נקודות בזמן שתשובה ממתינה, ומחבר הודעות ששולח ב-Enter ומוסיף שורה חדשה ב-Shift ו-Enter. התשובה מדומה בעזרת timeout, כך שהבלוק פועל בלי backend ומציג כל מצב שאינטגרציה אמיתית צריכה.
בינה מלאכותית
ממשק צ'אט עוזר AIפתחו תצוגה מקדימה בזמן אמת
- Hero, תמחור ו-auth
- תצוגה מקדימה של כל נקודת עצירה
- העתק את הקוד המקור
- MCP מוכן להתקנה
- Radix · Base UI · React Aria
- 158 בלוקים מוכנים
- קטעי עמוד שנשלחים
- לוחות מחוונים ושיווק
- Pro מפעיל את הקוד
- פריסות פתוחות
אהובה על מפתחים, מעצבים
ויוצרים
נתקלתי בערכת ה-UI שלך ולקחתי אותה מיד. חדשה, מתוחזקת באופן פעיל ומשתפרת כל הזמן — עבודה מדהימה! 🤘
Ziv Reich, מפתח תוכנה רק רציתי להגיד עבודה מעולה על neobrutalism.com. ממש אהבתי. אני גרוע בעיצוב, אז זה היה מדהים. השתמשתי בזה באתר האישי שלי.
Paul Bratslavsky, היוצר של Coding With Paul סוף סוף בניתי מחדש את האתר האישי שלי עם Neobrutalism.com — ספרייה כיפית, קל מאוד להתחיל!
Cameron Blackwood, יוצר תוכן Neobrutalism.com היא אחת מספריות רכיבי ה-UI האהובות עליי בסגנון רטרו — רכיבים שבאמת אפשר ל-ship.
Zhengyang Hou, אינדי האקר אחת מספריות ה-ui האהובות עליי לווב. עבודה מעולה — מקווה שזה ימריא רחוק.
Taseen Tanvir, מייסד ומעצב ניסיתי את Neobrutalism.com Pro — ערכת UI שלא נראית כמו כל השאר. הבלוקים הניאו-ברוטליסטיים 🔥 האיצו פרוטוטייפים של לייאאוטים מוזרים.
Nitesh Padghan, כותב צללים עיצוב דף נחיתה יפהפה עם איזון וזרימה מושלמים. פלטת הצבעים בשילוב האנימציות יוצרת חוויית משתמש יוצאת דופן.
Alan Obeng-Peprah, Senior Designer @ NativeXAI אני באמת מתרשם מהעיצוב שהם סיפקו. המוצר הסופי תאם בדיוק את מה שדמיינתי.
Desmond, מייסד-שותף @ VectorlabsVentures כבעל סוכנות, בדרך כלל אני מבלה שבועות בליטוש לייאאוטים של דפי נחיתה ללקוחות. עם Neobrutalism.com אני מחבר תבנית, מתאים את הטקסט ומוכן לשיפ.
Duke Opoku Amankwah, מייסד @ Midas התבניות לא רק מדהימות ויזואלית — הן גם בנויות מצוין. חסכו לנו שבועות של פיתוח.
Abiola Braimah, מפתח @ Studio IX איכות יוצאת דופן ותשומת לב לפרטים. העיצוב הרספונסיבי עובד חלק על כל המכשירים.
Acromond X., מייסד-שותף @ VectorlabsVentures שילוב התבניות האלה בזרימת העבודה קיצר משמעותית את מחזור הפיתוח. עבודה מצוינת.
Raquib S., מפתח Backend התבניות האלה הפכו למשאב ה-go-to שלנו. הקוד נקי, מתועד היטב וקל להתאמה.
Hallic M., מפתח @ AtlasLabs תבניות Neobrutalism.com מוצאות את האיזון המושלם בין אסתטיקה לפונקציונליות. משנות משחק אמיתיות לפרויקטים שלנו.
Ibrahim S., Frontend Lead @ ScaleUp תמיכה יוצאת דופן ותבניות באיכות פרימיום. ה-ROI על התבניות האלה פנומנלי.
Kevin K., CEO @ WebCraft תבניות Neobrutalism.com שינו לגמרי איך אנחנו ניגשים לפרויקטי לקוחות חדשים. איכות הקוד יוצאת דופן והעיצובים באמת ברמה עולמית.
Danny G., מייסד DevStack השתמשתי בהרבה ספריות תבניות, אבל Neobrutalism.com בולט בתשומת הלב לאופטימיזציית ביצועים ולארכיטקטורת קוד נקייה.
Ian D., CTO ב-Wavelength האנימציות והמיקרו-אינטראקציות בתבניות האלה פשוט מדהימות. ההשקעה הכי טובה לצוות העיצוב שלנו.
Ben S., Lead Designer ב-PixelPerfect כמייסד לא-טכני, תבניות Neobrutalism.com עזרו לנו להשיק MVP בזמן שיא בלי להתפשר על איכות העיצוב. המשקיעים שלנו התרשמו מאוד.
Matthew I., מייסד סטארטאפ אני מעריך כמה המודולים האלה מודולריים ומתועדים היטב. הצלחנו לערבב חלקים מתבניות שונות בלי חיכוך.
Garrett P., Frontend Lead ב-TechFusion ה-ROI על תבניות Neobrutalism.com מדהים. קיצרנו דרמטית את זמן הפיתוח תוך אספקת אתרים באיכות גבוהה יותר ללקוחות.
Xavier C., בעל סוכנות
שואלים
לעתים קרובות
כיצד בנויה בלוק ממשק צ'אט עוזר AI, מה תוכלו לשנות, ואיזה שימוש לעשות בו במקום בפריסות האחרות כאן.
לא. handleSend מוסיף את הודעת המבקר, מגדיר isReplying, ו-setTimeout מחזיר שורה מוכנה אחת אחרי 1.5 שניות. זו התפר להחלפה: החליפו את ה-timeout בקריאת fetch שלכם או בקריאת streaming ושמרו על הדגל isReplying, כי חיווי ההקלדה, כפתור השליחה המושבת והתנהגות הגלילה כולם תלויים בו.
כל הודעה היא id, שולח של user או assistant, התוכן, וגם זמן תצוגה וגם dateTime קריא-מכונה עבור אלמנט time. הזמן מעוצב כשההודעה נוצרת ולא בזמן רינדור, כי עיצוב Date בזמן רינדור גורם לשרת ולדפדפן לא להסכים על אזור הזמן ו-React מדווח על אי-התאמת hydration בטעינה.
הפאנל הוא h-[36rem] בטלפונים ו-h-[44rem] מ-sm ומעלה, והשרשור בין הכותרת למחבר ההודעות הוא החלק היחיד שגולל. גם הכותרת וגם המחבר הם ילדי flex בגובה קבוע, כך ששינוי גובה הפאנל משנה רק כמה מהשרשור נראה. השתמשו ביחידת viewport כמו h-[80vh] אם תרצו שהוא ימלא עמוד ולא יישב במדור.
כן - הם שלוש רשומות במערך composerActions, כל אחת עם תווית וסמל, כך שמחיקת רשומה מסירה כפתור. הם ריבועים של 44px כי זה יעד הנגיעה הנוח המינימלי, ולכל אחד יש aria-label עם הסמל שלו מסומן aria-hidden, כי לסמל בפני עצמו אין שם נגיש. הם כפתורי outline בכוונה, כך שרק כפתור השליחה נקרא כראשי.
גרסה מוקדמת יותר צבעה אותם ב-bg-chart-1, ב-bg-chart-5 וב-bg-chart-2 והדפיסה סמלים מעליהם. טוקני הגרפים נושאים ערכים שונים באור ובחושך, כך שהסמלים האלה היו קריאים בערכת נושא אחת וכמעט בלתי נראים בשנייה. כל משטח צבעוני כאן משתמש כעת בזוג טוקנים - bg-primary עם text-primary-foreground, bg-card עם text-card-foreground - מה שמשמר ניגודיות קבועה לא משנה איך הפלטה משתנה.
השרשור הוא role log עם aria-live polite, כך שקורא מסך מכריז על הודעות חדשות בלי להפריע, וחיווי ההקלדה נושא שורת Assistant is typing מוסתרת חזותית במקום להסתמך על שלוש נקודות מונפשות. הגלילה מגדירה scrollTop על השרשור עצמו במקום לקרוא ל-scrollIntoView, ורק אחרי השליחה הראשונה - scrollIntoView היה גורר את כל העמוד לבלוק הזה בטעינה.