@linktr.ee/messaging-react 1.39.0 → 1.40.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b as a, c as t, C as i, d as n, e as o, f as g, F as r, g as M, L as m, M as l, h as u, i as h, j as d, k as v, r as C, l as L, u as c, m as A, n as F } from "./index-j4j9UfK1.js";
+import { b as a, c as t, C as i, d as n, e as o, f as g, F as r, g as M, L as m, M as l, h as u, i as h, j as d, k as v, r as C, l as L, u as c, m as A, n as F } from "./index-DY-3-rt4.js";
 export {
   a as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/CustomMessage/MessageVoteButtons.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+
+import type { VoteSelection } from '../../hooks/useMessageVote'
+
+import { MessageVoteButtons } from './MessageVoteButtons'
+
+type ComponentProps = React.ComponentProps<typeof MessageVoteButtons>
+
+const meta: Meta<ComponentProps> = {
+  title: 'MessageVoteButtons',
+  component: MessageVoteButtons,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="p-12">
+    <MessageVoteButtons {...args} />
+  </div>
+)
+
+export const Unselected: StoryFn<ComponentProps> = Template.bind({})
+Unselected.args = {
+  selected: null,
+  onVoteUp: () => {},
+  onVoteDown: () => {},
+}
+
+export const GoodResponse: StoryFn<ComponentProps> = Template.bind({})
+GoodResponse.args = {
+  selected: 'up',
+  onVoteUp: () => {},
+  onVoteDown: () => {},
+}
+
+export const BadResponse: StoryFn<ComponentProps> = Template.bind({})
+BadResponse.args = {
+  selected: 'down',
+  onVoteUp: () => {},
+  onVoteDown: () => {},
+}
+
+export const Interactive: StoryFn = () => {
+  const [selected, setSelected] = useState<VoteSelection>(null)
+  return (
+    <div className="p-12">
+      <MessageVoteButtons
+        selected={selected}
+        onVoteUp={() => setSelected(selected === 'up' ? null : 'up')}
+        onVoteDown={() => setSelected(selected === 'down' ? null : 'down')}
+      />
+    </div>
+  )
+}
+
+export const AllVariants: StoryFn = () => (
+  <div className="p-12 flex flex-col gap-6">
+    <div className="flex items-center gap-4">
+      <span className="text-sm w-32">Unselected:</span>
+      <MessageVoteButtons
+        selected={null}
+        onVoteUp={() => {}}
+        onVoteDown={() => {}}
+      />
+    </div>
+    <div className="flex items-center gap-4">
+      <span className="text-sm w-32">Good response:</span>
+      <MessageVoteButtons
+        selected="up"
+        onVoteUp={() => {}}
+        onVoteDown={() => {}}
+      />
+    </div>
+    <div className="flex items-center gap-4">
+      <span className="text-sm w-32">Bad response:</span>
+      <MessageVoteButtons
+        selected="down"
+        onVoteUp={() => {}}
+        onVoteDown={() => {}}
+      />
+    </div>
+  </div>
+)

package/src/components/CustomMessage/MessageVoteButtons.tsx

@@ -1,3 +1,5 @@
+import { ThumbsUpIcon, ThumbsDownIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
 import React from 'react'
 
 import type { VoteSelection } from '../../hooks/useMessageVote'
@@ -8,32 +10,6 @@ interface MessageVoteButtonsProps {
   onVoteDown: () => void
 }
 
-const ThumbUpIcon: React.FC<{ filled: boolean }> = ({ filled }) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path
-      d="M4.667 7.333l2.666-6A1.333 1.333 0 018.667 2v2.667a.667.667 0 00.666.666h3.764a1.334 1.334 0 011.192 1.93l-2.333 4.666a1.333 1.333 0 01-1.193.738H4.667m0-5.334v5.334m0-5.334H2.667a1.333 1.333 0 00-1.334 1.334v2.666a1.333 1.333 0 001.334 1.334h2"
-      stroke="currentColor"
-      strokeWidth="1.33"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill={filled ? 'currentColor' : 'none'}
-    />
-  </svg>
-)
-
-const ThumbDownIcon: React.FC<{ filled: boolean }> = ({ filled }) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path
-      d="M11.333 8.667l-2.666 6A1.333 1.333 0 017.333 14v-2.667a.667.667 0 00-.666-.666H2.903a1.334 1.334 0 01-1.192-1.93l2.333-4.666a1.333 1.333 0 011.193-.738h6.096m0 5.334V3.333m0 5.334h2a1.333 1.333 0 001.334-1.334V4.667a1.333 1.333 0 00-1.334-1.334h-2"
-      stroke="currentColor"
-      strokeWidth="1.33"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill={filled ? 'currentColor' : 'none'}
-    />
-  </svg>
-)
-
 export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
   selected,
   onVoteUp,
@@ -42,21 +18,27 @@ export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
   <div className="message-vote-buttons">
     <button
       type="button"
-      className={`message-vote-button${selected === 'up' ? ' message-vote-button--selected' : ''} focus-ring`}
+      className={classNames('message-vote-button focus-ring', {
+        'message-vote-button--selected': selected === 'up',
+      })}
       onClick={onVoteUp}
-      aria-label="Helpful"
+      aria-label="Good response"
       aria-pressed={selected === 'up'}
+      data-tooltip="Good response"
     >
-      <ThumbUpIcon filled={selected === 'up'} />
+      <ThumbsUpIcon size={16} weight={selected === 'up' ? 'fill' : 'regular'} />
     </button>
     <button
       type="button"
-      className={`message-vote-button${selected === 'down' ? ' message-vote-button--selected' : ''} focus-ring`}
+      className={classNames('message-vote-button focus-ring', {
+        'message-vote-button--selected': selected === 'down',
+      })}
       onClick={onVoteDown}
-      aria-label="Not helpful"
+      aria-label="Bad response"
       aria-pressed={selected === 'down'}
+      data-tooltip="Bad response"
     >
-      <ThumbDownIcon filled={selected === 'down'} />
+      <ThumbsDownIcon size={16} weight={selected === 'down' ? 'fill' : 'regular'} />
     </button>
   </div>
 )

package/src/styles.css

@@ -280,6 +280,7 @@
 }
 
 .message-vote-button {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -289,7 +290,7 @@
   border: none;
   border-radius: 50%;
   background-color: transparent;
-  color: rgba(0, 0, 0, 0.35);
+  color: #737373;
   cursor: pointer;
   transition:
     background-color 0.15s,
@@ -297,16 +298,91 @@
 }
 
 .message-vote-button:hover {
-  background-color: rgba(0, 0, 0, 0.06);
-  color: rgba(0, 0, 0, 0.55);
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #737373;
 }
 
-.message-vote-button--selected {
-  color: rgba(0, 0, 0, 0.7);
+.message-vote-button[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s 0s;
 }
 
-.message-vote-button--selected:hover {
-  color: rgba(0, 0, 0, 0.7);
+.message-vote-button[data-tooltip]:hover::after,
+.message-vote-button[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transition-delay: 300ms;
+}
+
+/* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
+   (or other resets) strip from the body of `.str-chat__message-text-inner`. */
+.str-chat__message-text-inner :where(h1, h2, h3, h4, h5, h6) {
+  font-weight: 600;
+  margin: 0.5rem 0 0.25rem;
+  line-height: 1.3;
+  text-wrap: balance;
+}
+.str-chat__message-text-inner h1 {
+  font-size: 1.5rem;
+}
+.str-chat__message-text-inner h2 {
+  font-size: 1.25rem;
+}
+.str-chat__message-text-inner h3 {
+  font-size: 1.0625rem;
+}
+.str-chat__message-text-inner :where(h1, h2, h3, h4, h5, h6):first-child {
+  margin-top: 0;
+}
+
+.str-chat__message-text-inner ul {
+  list-style-type: disc;
+  padding-inline-start: 1.25rem;
+  margin: 0.25rem 0;
+}
+.str-chat__message-text-inner ol {
+  list-style-type: decimal;
+  padding-inline-start: 1.25rem;
+  margin: 0.25rem 0;
+}
+.str-chat__message-text-inner li {
+  display: list-item;
+  margin: 0.125rem 0;
+}
+.str-chat__message-text-inner ul ul,
+.str-chat__message-text-inner ol ol,
+.str-chat__message-text-inner ul ol,
+.str-chat__message-text-inner ol ul {
+  margin: 0;
+}
+
+.str-chat__message-text-inner a {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  word-break: break-word;
+}
+
+.str-chat__message-text-inner p {
+  margin: 0.25rem 0;
+  text-wrap: pretty;
+}
+.str-chat__message-text-inner > :first-child {
+  margin-top: 0;
+}
+.str-chat__message-text-inner > :last-child {
+  margin-bottom: 0;
 }
 
 /* Standalone tip message (tip without text) */