sellmate-design-system-react 9.0.0-beta.47 → 9.0.0-beta.49

package/dist/components/SChatMessage/README.md

@@ -15,9 +15,10 @@
 | `avatarSrc?` | `string` | — | 아바타 이미지 경로. 없으면 사람 아이콘 자리표시가 선다. **받은 메시지에만 쓰인다** — 보낸 메시지에는 아바타가 서지 않는다(`direction` 참고). |
 | `avatarAlt?` | `string` | — | 아바타 대체 텍스트 |
 | `continued?` | `boolean` | `false` | 같은 사람이 이어서 말한 묶음인지. 켜면 **아바타와 `sender` 를 그리지 않는다** — 말풍선이 위 묶음과 같은 선에서 시작해 한 사람의 말로 이어 읽힌다. 받은 메시지에서는 아바타 자리를 비워 둔 채 남긴다 — 안 남기면 말풍선이 44px 왼쪽으로 밀려 위 묶음과 어긋난다. 보낸 메시지는 아바타가 없으므로 이름만 숨긴다. `time`·`readStatus` 는 그대로 나온다. 시간이 벌어져 묶음을 나눴어도 얼굴은 한 번만 보이면 되고 시각은 묶음마다 필요하기 때문이다. **얼마나 벌어져야 묶음을 나눌지는 앱이 정한다** — 30분이든 하루든 대화의 성격에 달렸으므로 컴포넌트는 기준을 갖지 않고 스위치만 연다. |
-| `variant?` | `SChatMessageVariant` | `'default'` | 말풍선 종류. `template` 이면 말풍선이 옅은 파랑 면으로 서서 미리 등록된 서식으로 보내진 메시지임을 드러낸다. **보낸 메시지(`direction="outgoing"`)에만 쓰인다** — 받은 메시지에는 넘겨도 그리지 않는다. 템플릿은 사업자가 보내는 것이라 받은 쪽에는 뜻이 없다. 앱이 메시지를 한 번만 매핑해 방향과 무관하게 넘길 수 있도록 막지 않고 무시한다. |
+| `variant?` | `SChatMessageVariant` | `'default'` | 말풍선 종류. `template` 은 미리 등록된 서식으로, `admin` 은 관리자·시스템이 보낸 메시지임을 각각 다른 면으로 드러낸다. 면 색은 토큰이 정하므로 여기서 색을 정하지 않는다. **보낸 메시지(`direction="outgoing"`)에만 쓰인다** — 받은 메시지에는 넘겨도 그리지 않는다. 셋 다 사업자 쪽이 보내는 것이라 받은 쪽에는 뜻이 없다. 앱이 메시지를 한 번만 매핑해 방향과 무관하게 넘길 수 있도록 막지 않고 무시한다. |
 | `actions?` | `ReactNode` | — | 시각 아래에 붙는 동작 슬롯. 없으면 그 줄이 통째로 빠진다. 「상담원 연결」처럼 **이 메시지에 이어서 할 수 있는 동작**이 오는 자리다. 무엇을 놓을지는 앱이 정하고, 메시지는 줄로 세우고 방향에 맞춰 정렬하는 것까지만 한다. 시각과 같은 선에서 시작한다 — 말풍선 끝에서 한 칸 안이다. |
 | `messages?` | `ReactNode[]` | — | 말풍선 목록. **한 항목이 말풍선 하나**가 되어 위에서 아래로 쌓인다. 한 사람이 연달아 말하면 아바타·이름·시각은 한 번만 서고 말풍선만 늘어난다 — 그 묶음이 이 컴포넌트 한 개다. 말풍선 안에는 글뿐 아니라 버튼 같은 요소도 올 수 있다. |
+| `attachments?` | `ReactNode[]` | — | 말풍선 아래에 붙는 파일 목록. **한 항목이 칸 하나**가 되어 위에서 아래로 쌓인다. `SChatFile` 을 넣는 자리다 — 말풍선과 달리 면으로 감싸지 않고 넘긴 것을 그대로 세운다. 파일 칸은 제 면·선·라운드를 이미 갖고 있어 한 번 더 감싸면 칸이 두 겹으로 보인다. **`messages` 대신 여기로 넘긴다.** `messages` 로 넘기면 말풍선 면에 감싸여 그렇게 된다. 아바타·이름·시각·읽음 표시는 글 메시지와 똑같이 이 컴포넌트가 그린다 — 파일을 보낸 것도 대화의 한 줄이므로 행 규칙을 따로 갖지 않는다. |
 
 ## Types
 
@@ -57,12 +58,15 @@ export const CHAT_MESSAGE_READ_STATUSES = ['read', 'unread'] as const;
 
 ```ts
 /**
- * 말풍선의 종류. `template` 은 미리 등록된 서식으로 보내진 메시지다.
+ * 말풍선의 종류.
+ * - `default` 사람이 직접 쓴 메시지
+ * - `template` 미리 등록된 서식으로 보내진 메시지
+ * - `admin` 관리자·시스템이 보낸 메시지
  *
- * **보낸 메시지에서만 면이 갈린다.** 템플릿은 사업자가 보내는 것이라 받은 메시지에는
- * 뜻이 없고, 받은 메시지는 템플릿이든 아니든 같은 면으로 선다.
+ * **보낸 메시지에서만 면이 갈린다.** 셋 다 사업자 쪽이 보내는 것이라 받은 메시지에는
+ * 뜻이 없고, 받은 메시지는 무엇으로 보냈든 같은 면으로 선다.
  */
-export const CHAT_MESSAGE_VARIANTS = ['default', 'template'] as const;
+export const CHAT_MESSAGE_VARIANTS = ['default', 'template', 'admin'] as const;
 ```
 
 ## Dependencies

package/dist/components/SChatMessage/SChatMessage.d.ts

@@ -3,12 +3,15 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 export declare const CHAT_MESSAGE_DIRECTIONS: readonly ["incoming", "outgoing"];
 export type SChatMessageDirection = (typeof CHAT_MESSAGE_DIRECTIONS)[number];
 /**
- * 말풍선의 종류. `template` 은 미리 등록된 서식으로 보내진 메시지다.
+ * 말풍선의 종류.
+ * - `default` 사람이 직접 쓴 메시지
+ * - `template` 미리 등록된 서식으로 보내진 메시지
+ * - `admin` 관리자·시스템이 보낸 메시지
  *
- * **보낸 메시지에서만 면이 갈린다.** 템플릿은 사업자가 보내는 것이라 받은 메시지에는
- * 뜻이 없고, 받은 메시지는 템플릿이든 아니든 같은 면으로 선다.
+ * **보낸 메시지에서만 면이 갈린다.** 셋 다 사업자 쪽이 보내는 것이라 받은 메시지에는
+ * 뜻이 없고, 받은 메시지는 무엇으로 보냈든 같은 면으로 선다.
  */
-export declare const CHAT_MESSAGE_VARIANTS: readonly ["default", "template"];
+export declare const CHAT_MESSAGE_VARIANTS: readonly ["default", "template", "admin"];
 export type SChatMessageVariant = (typeof CHAT_MESSAGE_VARIANTS)[number];
 /** 상대가 내 메시지를 읽었는지. 시각 왼쪽에 붙는다. */
 export declare const CHAT_MESSAGE_READ_STATUSES: readonly ["read", "unread"];
@@ -62,11 +65,11 @@ export interface SChatMessageProps extends Omit<HTMLAttributes<HTMLDivElement>,
      */
     continued?: boolean;
     /**
-     * 말풍선 종류. `template` 이면 말풍선이 옅은 파랑 면으로 서서 미리 등록된 서식으로 보내진
-     * 메시지임을 드러낸다.
+     * 말풍선 종류. `template` 은 미리 등록된 서식으로, `admin` 은 관리자·시스템이 보낸
+     * 메시지임을 각각 다른 면으로 드러낸다. 면 색은 토큰이 정하므로 여기서 색을 정하지 않는다.
      *
      * **보낸 메시지(`direction="outgoing"`)에만 쓰인다** — 받은 메시지에는 넘겨도 그리지 않는다.
-     * 템플릿은 사업자가 보내는 것이라 받은 쪽에는 뜻이 없다. 앱이 메시지를 한 번만 매핑해
+     * 셋 다 사업자 쪽이 보내는 것이라 받은 쪽에는 뜻이 없다. 앱이 메시지를 한 번만 매핑해
      * 방향과 무관하게 넘길 수 있도록 막지 않고 무시한다.
      */
     variant?: SChatMessageVariant;
@@ -86,6 +89,18 @@ export interface SChatMessageProps extends Omit<HTMLAttributes<HTMLDivElement>,
      * 그 묶음이 이 컴포넌트 한 개다. 말풍선 안에는 글뿐 아니라 버튼 같은 요소도 올 수 있다.
      */
     messages?: ReactNode[];
+    /**
+     * 말풍선 아래에 붙는 파일 목록. **한 항목이 칸 하나**가 되어 위에서 아래로 쌓인다.
+     *
+     * `SChatFile` 을 넣는 자리다 — 말풍선과 달리 면으로 감싸지 않고 넘긴 것을 그대로 세운다.
+     * 파일 칸은 제 면·선·라운드를 이미 갖고 있어 한 번 더 감싸면 칸이 두 겹으로 보인다.
+     *
+     * **`messages` 대신 여기로 넘긴다.** `messages` 로 넘기면 말풍선 면에 감싸여 그렇게 된다.
+     *
+     * 아바타·이름·시각·읽음 표시는 글 메시지와 똑같이 이 컴포넌트가 그린다 — 파일을 보낸 것도
+     * 대화의 한 줄이므로 행 규칙을 따로 갖지 않는다.
+     */
+    attachments?: ReactNode[];
 }
 /**
  * SChatMessage — 대화 화면에서 한 사람이 한 번에 말한 묶음.

package/dist/components/SGhostButton/README.md

@@ -48,6 +48,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SBarcodeInput](../SBarcodeInput)
  - [SCalendar](../SCalendar)
  - [SCalendarBoard](../SCalendarBoard)
+ - [SChatAttachedFile](../SChatAttachedFile)
  - [SChatInput](../SChatInput)
  - [SChip](../SChip)
  - [SDatePicker](../SDatePicker)
@@ -82,6 +83,7 @@ graph TD;
   SBarcodeInput --> SGhostButton
   SCalendar --> SGhostButton
   SCalendarBoard --> SGhostButton
+  SChatAttachedFile --> SGhostButton
   SChatInput --> SGhostButton
   SChip --> SGhostButton
   SDatePicker --> SGhostButton

package/dist/components/SIcon/README.md

@@ -24,6 +24,7 @@
  - [SButton](../SButton)
  - [SCallout](../SCallout)
  - [SChatAttachedFile](../SChatAttachedFile)
+ - [SChatFile](../SChatFile)
  - [SChatMessage](../SChatMessage)
  - [SCheckbox](../SCheckbox)
  - [SChipFilter](../SChipFilter)
@@ -69,6 +70,7 @@ graph TD;
   SButton --> SIcon
   SCallout --> SIcon
   SChatAttachedFile --> SIcon
+  SChatFile --> SIcon
   SChatMessage --> SIcon
   SCheckbox --> SIcon
   SChipFilter --> SIcon