@xcelsior/ui-chat 2.0.2 → 2.0.4

package/storybook-static/assets/MessageItem.stories-Ckr1_scc.js

@@ -1,255 +0,0 @@
-import{j as t}from"./jsx-runtime-Cf8x2fCZ.js";import{M as a}from"./MessageItem-DAaKZ9s9.js";import"./index-yBjzXJbu.js";import"./BrandIcons-Cjy5INAp.js";import"./index--qcDGAq6.js";import"./en-US-BukEqXxE.js";const Oe={title:"Components/MessageItem",component:a,parameters:{layout:"padded"},tags:["autodocs"]},s={name:"John Doe",email:"john@example.com",type:"customer",status:"online"},e={id:"1",conversationId:"conv-1",senderId:"user@example.com",senderType:"customer",content:"Hello, I need help with my account.",messageType:"text",createdAt:new Date().toISOString(),status:"sent"},o={args:{message:{...e,senderId:s.email,content:"Hello, I need help with my account."},currentUser:s,showAvatar:!0,showTimestamp:!0}},n={args:{message:{...e,senderId:"agent@example.com",senderType:"agent",content:"Hi! I'd be happy to help you with your account. What issue are you experiencing?"},currentUser:s,showAvatar:!0,showTimestamp:!0}},m={args:{message:{...e,senderId:"ai-assistant",senderType:"bot",content:`Hello! I'm the Xcelsior assistant. Based on our knowledge base, here are some common solutions:
-
-1. Reset your password
-2. Verify your email
-3. Contact support
-
-Which would you like help with?`,confidence:.85,metadata:{isAI:!0,kbUsed:!0}},currentUser:s,showAvatar:!0,showTimestamp:!0}},i={args:{message:{...e,senderId:"ai-assistant",senderType:"bot",content:"I'm not entirely sure about this, but let me check with my team. In the meantime, you might want to visit our help center.",confidence:.3,metadata:{isAI:!0,kbUsed:!1}},currentUser:s,showAvatar:!0,showTimestamp:!0}},c={args:{message:{...e,senderId:"ai-assistant",senderType:"bot",content:"You can reset your password by going to Settings > Security > Change Password.",feedback:"good",confidence:.9,metadata:{isAI:!0,kbUsed:!0}},currentUser:s,showAvatar:!0,showTimestamp:!0}},d={args:{message:{...e,senderId:"ai-assistant",senderType:"bot",content:"Your subscription expires on March 15th.",feedback:"wrong",confidence:.6,metadata:{isAI:!0,kbUsed:!0}},currentUser:s,showAvatar:!0,showTimestamp:!0}},p={args:{message:{...e,senderId:"ai-assistant",senderType:"bot",content:`## Getting Started
-
-Here's how you can reset your password:
-
-1. Go to the login page
-2. Click on **"Forgot Password"**
-3. Enter your email address
-4. Check your inbox for the reset link
-
-*Note: The link expires in 24 hours.*
-
-For more help, visit our [support page](https://xcelsior.co/support).`,metadata:{isAI:!0,kbUsed:!0}},currentUser:s,showAvatar:!0,showTimestamp:!0}},u={args:{message:{...e,senderId:"system",senderType:"system",content:"Agent John joined the conversation",messageType:"system"},currentUser:s,showAvatar:!0,showTimestamp:!0}},g={args:{message:{...e,senderId:"system",senderType:"system",content:"Connecting you with a team member who can help further...",messageType:"system"},currentUser:s,showAvatar:!0,showTimestamp:!0}},h={args:{message:{...e,senderId:"system",senderType:"system",content:"Sarah from our team is here to help!",messageType:"system"},currentUser:s,showAvatar:!0,showTimestamp:!0}},l={args:{message:{...e,content:"https://picsum.photos/400/300",messageType:"image"},currentUser:s,showAvatar:!0,showTimestamp:!0}},y={args:{message:{...e,content:"https://example.com/document.pdf",messageType:"file",metadata:{fileName:"Technical Documentation.pdf"}},currentUser:s,showAvatar:!0,showTimestamp:!0}},w={render:r=>t.jsxs("div",{className:"flex flex-col gap-2 max-w-2xl p-4 bg-gray-950 rounded-lg",children:[t.jsx(a,{...r,message:{...e,id:"1",senderId:s.email,senderType:"customer",content:"Hi, I need help with pricing for a custom web app."}}),t.jsx(a,{...r,message:{...e,id:"2",senderId:"ai-assistant",senderType:"bot",content:"Hello! I'd be happy to help with pricing. At Xcelsior, we offer custom quotes based on your project requirements. Could you tell me more about what you're looking for?",confidence:.8,metadata:{isAI:!0,kbUsed:!0},createdAt:new Date(Date.now()-6e4).toISOString()}}),t.jsx(a,{...r,message:{...e,id:"3",senderId:s.email,senderType:"customer",content:"I want to talk to a real person about this. Can you connect me with your sales team?",createdAt:new Date(Date.now()-3e4).toISOString()}}),t.jsx(a,{...r,message:{...e,id:"4",senderId:"system",senderType:"system",content:"Connecting you with a team member who can help further...",messageType:"system",createdAt:new Date(Date.now()-25e3).toISOString()}}),t.jsx(a,{...r,message:{...e,id:"5",senderId:"sarah@xcelsior.co",senderType:"agent",content:"Hi there! I'm Sarah from our sales team. I'd love to discuss your custom web app project. Can you share a bit about the features you need and your timeline?",createdAt:new Date().toISOString()}})]}),args:{currentUser:s,showAvatar:!0,showTimestamp:!0}};var b,I,T,f,A;o.parameters={...o.parameters,docs:{...(b=o.parameters)==null?void 0:b.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: currentUser.email,
-      content: 'Hello, I need help with my account.'
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(T=(I=o.parameters)==null?void 0:I.docs)==null?void 0:T.source},description:{story:"Customer message (own message)",...(A=(f=o.parameters)==null?void 0:f.docs)==null?void 0:A.description}}};var M,k,S,v,x;n.parameters={...n.parameters,docs:{...(M=n.parameters)==null?void 0:M.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'agent@example.com',
-      senderType: 'agent',
-      content: "Hi! I'd be happy to help you with your account. What issue are you experiencing?"
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(S=(k=n.parameters)==null?void 0:k.docs)==null?void 0:S.source},description:{story:"Human agent message",...(x=(v=n.parameters)==null?void 0:v.docs)==null?void 0:x.description}}};var U,C,D,B,F;m.parameters={...m.parameters,docs:{...(U=m.parameters)==null?void 0:U.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'ai-assistant',
-      senderType: 'bot',
-      content: "Hello! I'm the Xcelsior assistant. Based on our knowledge base, here are some common solutions:\\n\\n1. Reset your password\\n2. Verify your email\\n3. Contact support\\n\\nWhich would you like help with?",
-      confidence: 0.85,
-      metadata: {
-        isAI: true,
-        kbUsed: true
-      }
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(D=(C=m.parameters)==null?void 0:C.docs)==null?void 0:D.source},description:{story:"Bot message (AI assistant) — new senderType",...(F=(B=m.parameters)==null?void 0:B.docs)==null?void 0:F.description}}};var H,j,O,N,W;i.parameters={...i.parameters,docs:{...(H=i.parameters)==null?void 0:H.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'ai-assistant',
-      senderType: 'bot',
-      content: "I'm not entirely sure about this, but let me check with my team. In the meantime, you might want to visit our help center.",
-      confidence: 0.3,
-      metadata: {
-        isAI: true,
-        kbUsed: false
-      }
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(O=(j=i.parameters)==null?void 0:j.docs)==null?void 0:O.source},description:{story:"Bot message with low confidence",...(W=(N=i.parameters)==null?void 0:N.docs)==null?void 0:W.description}}};var E,G,q,P,X;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'ai-assistant',
-      senderType: 'bot',
-      content: "You can reset your password by going to Settings > Security > Change Password.",
-      feedback: 'good',
-      confidence: 0.9,
-      metadata: {
-        isAI: true,
-        kbUsed: true
-      }
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(q=(G=c.parameters)==null?void 0:G.docs)==null?void 0:q.source},description:{story:"Bot message with feedback (rated good)",...(X=(P=c.parameters)==null?void 0:P.docs)==null?void 0:X.description}}};var Y,J,R,L,V;d.parameters={...d.parameters,docs:{...(Y=d.parameters)==null?void 0:Y.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'ai-assistant',
-      senderType: 'bot',
-      content: "Your subscription expires on March 15th.",
-      feedback: 'wrong',
-      confidence: 0.6,
-      metadata: {
-        isAI: true,
-        kbUsed: true
-      }
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(R=(J=d.parameters)==null?void 0:J.docs)==null?void 0:R.source},description:{story:"Bot message with feedback (rated wrong)",...(V=(L=d.parameters)==null?void 0:L.docs)==null?void 0:V.description}}};var _,z,K,Q,Z;p.parameters={...p.parameters,docs:{...(_=p.parameters)==null?void 0:_.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'ai-assistant',
-      senderType: 'bot',
-      content: \`## Getting Started
-
-Here's how you can reset your password:
-
-1. Go to the login page
-2. Click on **"Forgot Password"**
-3. Enter your email address
-4. Check your inbox for the reset link
-
-*Note: The link expires in 24 hours.*
-
-For more help, visit our [support page](https://xcelsior.co/support).\`,
-      metadata: {
-        isAI: true,
-        kbUsed: true
-      }
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(K=(z=p.parameters)==null?void 0:z.docs)==null?void 0:K.source},description:{story:"AI message with markdown formatting",...(Z=(Q=p.parameters)==null?void 0:Q.docs)==null?void 0:Z.description}}};var $,ee,se,te,ae;u.parameters={...u.parameters,docs:{...($=u.parameters)==null?void 0:$.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'system',
-      senderType: 'system',
-      content: 'Agent John joined the conversation',
-      messageType: 'system'
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(se=(ee=u.parameters)==null?void 0:ee.docs)==null?void 0:se.source},description:{story:"System message — generic",...(ae=(te=u.parameters)==null?void 0:te.docs)==null?void 0:ae.description}}};var re,oe,ne,me,ie;g.parameters={...g.parameters,docs:{...(re=g.parameters)==null?void 0:re.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'system',
-      senderType: 'system',
-      content: 'Connecting you with a team member who can help further...',
-      messageType: 'system'
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(ne=(oe=g.parameters)==null?void 0:oe.docs)==null?void 0:ne.source},description:{story:"System message — escalation notice",...(ie=(me=g.parameters)==null?void 0:me.docs)==null?void 0:ie.description}}};var ce,de,pe,ue,ge;h.parameters={...h.parameters,docs:{...(ce=h.parameters)==null?void 0:ce.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      senderId: 'system',
-      senderType: 'system',
-      content: 'Sarah from our team is here to help!',
-      messageType: 'system'
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(pe=(de=h.parameters)==null?void 0:de.docs)==null?void 0:pe.source},description:{story:"System message — agent took over",...(ge=(ue=h.parameters)==null?void 0:ue.docs)==null?void 0:ge.description}}};var he,le,ye,we,be;l.parameters={...l.parameters,docs:{...(he=l.parameters)==null?void 0:he.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      content: 'https://picsum.photos/400/300',
-      messageType: 'image'
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(ye=(le=l.parameters)==null?void 0:le.docs)==null?void 0:ye.source},description:{story:"Image message",...(be=(we=l.parameters)==null?void 0:we.docs)==null?void 0:be.description}}};var Ie,Te,fe,Ae,Me;y.parameters={...y.parameters,docs:{...(Ie=y.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
-  args: {
-    message: {
-      ...baseMessage,
-      content: 'https://example.com/document.pdf',
-      messageType: 'file',
-      metadata: {
-        fileName: 'Technical Documentation.pdf'
-      }
-    },
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(fe=(Te=y.parameters)==null?void 0:Te.docs)==null?void 0:fe.source},description:{story:"File message",...(Me=(Ae=y.parameters)==null?void 0:Ae.docs)==null?void 0:Me.description}}};var ke,Se,ve,xe,Ue;w.parameters={...w.parameters,docs:{...(ke=w.parameters)==null?void 0:ke.docs,source:{originalSource:`{
-  render: args => <div className="flex flex-col gap-2 max-w-2xl p-4 bg-gray-950 rounded-lg">
-            <MessageItem {...args} message={{
-      ...baseMessage,
-      id: '1',
-      senderId: currentUser.email,
-      senderType: 'customer',
-      content: 'Hi, I need help with pricing for a custom web app.'
-    }} />
-            <MessageItem {...args} message={{
-      ...baseMessage,
-      id: '2',
-      senderId: 'ai-assistant',
-      senderType: 'bot',
-      content: "Hello! I'd be happy to help with pricing. At Xcelsior, we offer custom quotes based on your project requirements. Could you tell me more about what you're looking for?",
-      confidence: 0.8,
-      metadata: {
-        isAI: true,
-        kbUsed: true
-      },
-      createdAt: new Date(Date.now() - 60000).toISOString()
-    }} />
-            <MessageItem {...args} message={{
-      ...baseMessage,
-      id: '3',
-      senderId: currentUser.email,
-      senderType: 'customer',
-      content: 'I want to talk to a real person about this. Can you connect me with your sales team?',
-      createdAt: new Date(Date.now() - 30000).toISOString()
-    }} />
-            <MessageItem {...args} message={{
-      ...baseMessage,
-      id: '4',
-      senderId: 'system',
-      senderType: 'system',
-      content: 'Connecting you with a team member who can help further...',
-      messageType: 'system',
-      createdAt: new Date(Date.now() - 25000).toISOString()
-    }} />
-            <MessageItem {...args} message={{
-      ...baseMessage,
-      id: '5',
-      senderId: 'sarah@xcelsior.co',
-      senderType: 'agent',
-      content: "Hi there! I'm Sarah from our sales team. I'd love to discuss your custom web app project. Can you share a bit about the features you need and your timeline?",
-      createdAt: new Date().toISOString()
-    }} />
-        </div>,
-  args: {
-    currentUser,
-    showAvatar: true,
-    showTimestamp: true
-  }
-}`,...(ve=(Se=w.parameters)==null?void 0:Se.docs)==null?void 0:ve.source},description:{story:"Full conversation flow: customer → bot → escalation → agent",...(Ue=(xe=w.parameters)==null?void 0:xe.docs)==null?void 0:Ue.description}}};const Ne=["CustomerMessage","AgentMessage","BotMessage","BotMessageLowConfidence","BotMessageFeedbackGood","BotMessageFeedbackWrong","BotMessageWithMarkdown","SystemMessage","EscalationNotice","AgentTookOver","ImageMessage","FileMessage","FullConversationFlow"];export{n as AgentMessage,h as AgentTookOver,m as BotMessage,c as BotMessageFeedbackGood,d as BotMessageFeedbackWrong,i as BotMessageLowConfidence,p as BotMessageWithMarkdown,o as CustomerMessage,g as EscalationNotice,y as FileMessage,w as FullConversationFlow,l as ImageMessage,u as SystemMessage,Ne as __namedExportsOrder,Oe as default};