@ amoryuh/ 组件

整个特性的可制式反应组件,以 @amauryuh/ui'布局和' 风格取自 Tailwind CSS v4 。 开始聊天及其列表 谈话.

安装

npm install @amauryuh/components @amauryuh/ui i18next react-i18next

同伴依赖性 : react 财务报告和审定财务报表 react-dom (18岁以上), tailwindcss (v4级), @amauryuh/ui (0.6.1+), (中文(简体) ), i18next (23+)和(23+) react-i18next (14+) (英语).

尾风跳过 node_modules,因此在后面导入两个软件包的样式表 尾风:

@import "tailwindcss";
@import "@amauryuh/ui/styles.css";
@import "@amauryuh/components/styles.css";

聊天

Apple Messages 风格的完整消息应用程序:聊天列表 在边栏, 和开放聊天旁边。 它看起来像消息在 iPhone 在小屏幕上, 和像 Mac 上的信件来自 md 起来.

• 列表 : 用户的外观和名称,按标题搜索,文件夹标签和每聊天一行 最新消息和一个未读的点(见 说吧 列表) (中文(简体) ).
• 标题栏 : 移动( 它打开列表) 上的后按钮 avatar和标题,以及缩小日志的搜索.
• 日志 : 日线(旧消息的年份),运行时间 每一个发件人发的讯息, 上面有一个尾巴, 引用的答复, 备份、视图计数和“已交付”.
• 作曲家 : 字段上方的回复预览。 用单笔答复 emoji对消息的反应代替.
• 类型 : 直接聊天、分组和频道(参见 类型) (中文(简体) ).
• 答复: 悬浮或键盘焦点上的气泡旁的回放按钮, 或者在触摸屏上,左侧是刷子。 点击一个引用跳转到 原创的.
• 动议 : 将新信件弹出并推出日志。 日志保留在 最新消息, 除非用户已滚动 .

Chat 每次聊天都取出一个后端, 并保留哪个打开 本身:列表的一行打开其聊天,所以后端不依赖 在应用程序的地址或路线。 生来无子,如下所出 准备使用: Layout 联 合 国 @amauryuh/ui列表中 它的侧边栏和旁边的公开聊天 有孩子,它只提供 州和你们列出部分 部件) (中文(简体) ).

import { Chat, type IChat } from "@amauryuh/components";

export default function App() {
  const { conversations, post, react, mute, read } = useMyChats(); // your data

  const backend: IChat = {
    user: { name: "Alex Kim", avatar: "/alex.jpg" },
    chats: conversations.map((c) => ({
      id: c.id,
      info: { type: c.type, title: c.title, muted: c.muted },
      messages: c.messages,
      folders: c.labels, // e.g. ["Work"]
      unread: c.unread,
    })),
    post,
    react,
    mute,
    read,
  };

  return <Chat backend={backend} />;
}

后端 : IChat

普通数据和回调,与打开的聊天方式相同. 继续 从你的状态,例如从套接字或商店。 每个动作 得到它用来聊天的id.

ChatConversation数字 :

ChatInfo数字 :

ChatMessage数字 :

类型

这些部分适应 info.type数字 :

将新类型的聊天作为类型添加到软件包中, 因此每个应用程序都会得到 他们.

其他道具

• children: 您自己的部件布局 。 没有它, Chat 调制 全文 Layout。 。 。 .
• className:用于现成 Layout带着孩子,把它送给 属于你自己的.
• classNames: 见 样式。 。 。 .

翻译

组件使用您的应用程序的 i18 次例通过 react-i18next。 。 。 . 软件包从不初始化 i18next 并且不使用本地语: 您的应用程序集 i18 照旧,与 initReactI18next 或一个 I18nextProvider, (中文(简体) ), 而组件遵循它的语言。 增加翻译 components 命名空间( 导出为 namespace:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    es: {
      translation: { /* your app's strings */ },
      components: {
        chat: {
          search: "Buscar en el chat",
          views_one: "{{count}} vista",
          views_other: "{{count}} vistas",
          // …
        },
      },
    },
  },
  lng: "es",
  fallbackLng: "es",
});

英语是后退。 你留下的每把钥匙都用英语显示, 即使是当你 fallbackLng 是另一种语言,所以你可以翻译 只有一些钥匙。 英语不需要资源;为了修改其措辞,添加 en.components。其字符串导出为 en,例如作为模板. 没有i18next实例,组件显示英语.

日期和数字以 i18next 当前语言格式化, 所以使用 你要的密码,例如. es-419。修改语言 (单位:千美元)i18n.changeLanguage重新交代聊天内容,包括其日期.

每把钥匙,在下面 components数字 :

要用您的其他密钥进行键入检查, 请在 i18next 中添加命名空间 CustomTypeOptions。 。 。 .

部件

每一部分均可作为 Chat.*。这些部分只需要 className数字 : 他们的表率和行为,从四周而来 Chat. 以 孩子们, Chat 只有供养者,儿童才是布局. <Chat backend={backend} /> 与下列情况相同:

import { Layout } from "@amauryuh/ui";

<Chat backend={backend}>
  <Layout>
    <Layout.Sidebar className="md:w-88">
      <Chat.List />
    </Layout.Sidebar>
    <Chat.Container>
      <Chat.Header />
      <Chat.Messages />
      <Chat.Footer />
      <Chat.ScrollToBottom />
    </Chat.Container>
  </Layout>
</Chat>

Chat.Container 没有孩子,这四个部分,所以布局 ,例如添加设置按钮 到列表上方栏:

<Chat backend={backend}>
  <Layout className="bg-white">
    <Layout.Sidebar className="md:w-88">
      <Chat.List actions={<SettingsButton />} />
    </Layout.Sidebar>
    <Chat.Container />
  </Layout>
</Chat>

自己的部分可以读取状态:

• useChats(),任何内部 Chat数字 : backend, (中文(简体) ), open (开放) 聊天时, setOpen(chatId) 打开另一个,和 draftOf(chatId)。 。 。 .
• useChatContext()内部 Chat.Container: 打开 chat, (中文(简体) ), canPost, (中文(简体) ), post, (中文(简体) ), react, (中文(简体) ), mute 财务报告和审定财务报表 pin 对于它, messages (过滤由 寻找, search, (中文(简体) ), setSearch, (中文(简体) ), draft, (中文(简体) ), setDraft, (中文(简体) ), reply 财务报告和审定财务报表 jumpTo。例如,您自己的脚步可以隐藏在 search !== null按钮 reply(message)。 。 。 .

有远见

Avatar 显示图片( e)src或者一个名字的首字母在一圈, 就像聊天时的化身一样 它需要没有 Chat 围绕它:

import { Avatar } from "@amauryuh/components";

<Avatar className="size-9 text-sm" name={user.name} src={user.photo} />

说吧 列表

后端的聊天,一个 Layout.Sidebar它有:

• 顶端栏 : 后门的 user和他们的名字,在 左边,右边你自己 actions (例如设置按钮). 没有两个,没有顶部酒吧.
• 搜索 根据标题.
• 文件夹标签 : 所有,然后每一个文件夹 聊天的顺序 他们首先出现。 没有聊天的文件夹就藏起来了.
• 每聊天一行 : avatar, 标题, 哑音图标, 其最新时间 消息(今天的时间,然后是"昨天", 工作日,白天和 日期)和两行预览. 未读聊天得到点.
• 锁定聊天 (单位:千美元)info.pinned来第一,在后端 命令,在他们的行右侧有一针。 文件夹保存 后端的订单.

一行打开聊天,并关闭移动边栏. 公开聊天是 标记为 aria-current="page" 并变出蓝色,两相间 视图。 列表的插槽从 list。 。 。 .

样式

每个部分有一个带有默认类的插槽(chatStyles) (中文(简体) ). 类是 与 tailwind-merge,后者获胜:

1. 空档的默认值,
2. classNames 授予 Chat按档次,
3. 该部分的自身 className。 。 。 .

版式和行为类(弹性、位置、短线、隐藏) 因此,样式可以改变一切,但 设置.

<Chat
  backend={backend}
  classNames={{
    bubble: "rounded-lg data-own:bg-emerald-600",
    composer: "rounded-lg bg-slate-100 shadow-none",
  }}
/>

<Chat.Composer className="bg-amber-100" />

部分状态在数据属性中,到有Tailwind变体的样式:

数量 Chat.List数字 : listPanel, (中文(简体) ), listHeader, (中文(简体) ), listUser, (中文(简体) ), listUserAvatar, (中文(简体) ), listUserName, (中文(简体) ), listSearch, (中文(简体) ), listSearchInput, (中文(简体) ), listFolders, (中文(简体) ), listFolder (单位:千美元)data-selected 以被选中者发誓, list, (中文(简体) ), listRow (单位:千美元)aria-current="page" 在开口的时候, listRowText, (中文(简体) ), listRowTitle, (中文(简体) ), listRowMuted, (中文(简体) ), listRowTime, (中文(简体) ), listRowAvatar, (中文(简体) ), listRowChevron, (中文(简体) ), listRowPinned, (中文(简体) ), listRowPreview, (中文(简体) ), listUnread, (中文(简体) ), listEmpty 财务报告和审定财务报表 avatar。 。 。 .

数量 Chat数字 : root, (中文(简体) ), header, (中文(简体) ), headerBar, (中文(简体) ), headerActions, (中文(简体) ), headerButton, (中文(简体) ), headerAvatar, (中文(简体) ), title, (中文(简体) ), search, (中文(简体) ), searchInput, (中文(简体) ), messages, (中文(简体) ), empty, (中文(简体) ), log, (中文(简体) ), dayLine, (中文(简体) ), message, (中文(简体) ), column, (中文(简体) ), sender, (中文(简体) ), senderAvatar, (中文(简体) ), bubble, (中文(简体) ), quote, (中文(简体) ), quoteAuthor, (中文(简体) ), quoteText, (中文(简体) ), reactions, (中文(简体) ), replyButton, (中文(简体) ), swipeHint, (中文(简体) ), views, (中文(简体) ), delivered, (中文(简体) ), footer, (中文(简体) ), composer, (中文(简体) ), replyPreview, (中文(简体) ), replyPreviewTitle, (中文(简体) ), replyPreviewText, (中文(简体) ), cancelReply, (中文(简体) ), input, (中文(简体) ), sendButton, (中文(简体) ), muteButton, (中文(简体) ), scrollToBottom 财务报告和审定财务报表 avatar。 。 。 .

要同时重塑每个部分, 请重新定义您自己的主题变量 @theme数字 :

@theme {
  --color-chat-accent: #0a72e8; /* own bubbles, buttons */
  --color-chat-bubble: #e9e9eb; /* other people's bubbles */
  --color-chat-label: #000;
  --color-chat-secondary: #6d6d72;
  --color-chat-separator: #d1d1d6;
  --color-chat-fill: #7676801f; /* search fields, folder tabs */
  --color-chat-panel-top: #f6f6f7; /* the list's panel (md+) */
  --color-chat-panel-bottom: #f1f1f3;
  --color-chat-avatar-top: #b5bacd;
  --color-chat-avatar-bottom: #8a8fa6;
  --text-chat-body: 1.0625rem;
  --text-chat-subhead: 0.9375rem;
  --text-chat-footnote: 0.8125rem;
}

到达的动画是 animate-chat-bubble-in 财务报告和审定财务报表 animate-chat-bubble-sent。它们只在用户不要求时运行 减少运动.