@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 19.6 kB
JavaScript
var SLDS;!function(){"use strict";var e,t={769:function(e,t,n){n.d(t,{DoctypeIcon:function(){return m}});var a=n(1594),l=n.n(a),i=n(8347),r=n(942),s=n.n(r),m=function(e){var t=e.symbol||"xml";return l().createElement("span",{className:s()("slds-icon_container slds-icon-doctype-"+t,e.containerClassName),title:e.title||"Description of icon when needed"},l().createElement(i.A,{className:s()("slds-icon",e.className),sprite:"doctype",symbol:t}),l().createElement("span",{className:"slds-assistive-text"},e.assistiveText||"Description of icon when needed"))}},1594:function(e){e.exports=React},4613:function(e,t,n){n.r(t),n.d(t,{default:function(){return W},examples:function(){return w},states:function(){return M}});var a=n(1594),l=n.n(a),i=n(942),r=n.n(i),s=n(405),m=n(538),o=n(6542),c=function(e){return l().createElement("section",{role:"log",className:r()("slds-chat",{"slds-chat_past":e.isPast})},e.children)},u=function(e){return l().createElement("ul",{className:"slds-chat-list"},e.children)},d=function(e){return l().createElement("li",{className:r()("slds-chat-listitem",{"slds-chat-listitem_bookend":"bookend"===e.type,"slds-chat-listitem_event":"event"===e.type,"slds-chat-listitem_inbound":"inbound"===e.type,"slds-chat-listitem_outbound":"outbound"===e.type})},e.children)},p=function(e){return l().createElement("div",{className:r()("slds-chat-message",{"slds-chat-message_faux-avatar":e.hasFauxAvatar})},e.children)},y=function(e){var t={"slds-chat-message__text":!e.messageType,"slds-chat-message__text_inbound":!e.messageType&&"inbound"===e.type,"slds-chat-message__text_outbound":!e.messageType&&"outbound"===e.type,"slds-chat-message__text_outbound-agent":!e.messageType&&"outbound-agent"===e.type,"slds-chat-message__text_unsupported-type":!e.messageType&&"unsupported-type"===e.type,"slds-chat-message__text_delivery-failure":!e.messageType&&"delivery-failure"===e.type,"slds-chat-message__text_sneak-peek":!e.messageType&&e.hasSneakPeek},n={"slds-chat-message__file":"file"===e.messageType,"slds-chat-message__file_inbound":"file"===e.messageType&&"inbound"===e.type,"slds-chat-message__file_outbound":"file"===e.messageType&&"outbound"===e.type},a={"slds-chat-message__image":"image"===e.messageType,"slds-chat-message__image_inbound":"image"===e.messageType&&"inbound"===e.type,"slds-chat-message__image_outbound":"image"===e.messageType&&"outbound"===e.type};return l().createElement("div",{className:r()("slds-chat-message__body",{"slds-chat-message__file_loading":"file"===e.messageType&&e.isLoading,"slds-chat-message__image_loading":"image"===e.messageType&&e.isLoading})},e.name&&e.timeStamp&&e.isPast&&l().createElement(E,{isPast:!0,name:e.name,timeStamp:e.timeStamp}),l().createElement("div",{className:r()(t,n,a)},e.isTyping&&l().createElement(o.A,{isAnimated:!0,isPaused:e.isPaused,assistiveText:"Customer is typing",title:"Customer is typing"}),"unsupported-type"===e.type&&l().createElement(_,{symbol:"warning",assistiveText:"Warning"}),e.children&&("image"===e.messageType||"file"===e.messageType?e.children:l().createElement("span",{"aria-hidden":e.hasSneakPeek?"true":null},e.children)),"delivery-failure"===e.type&&l().createElement(b,null,e.deliveryFailureReason)),"delivery-failure"===e.type?l().createElement("div",{className:"slds-grid slds-grid_align-spread slds-grid_vertical-align-start"},e.name&&e.timeStamp&&!e.isPast&&l().createElement(E,{name:e.name,timeStamp:e.timeStamp}),"delivery-failure"===e.type&&l().createElement(h,{symbol:"redo",actionTitle:"Resend"})):e.name&&e.timeStamp&&!e.isPast&&l().createElement(E,{name:e.name,timeStamp:e.timeStamp}))},E=function(e){return l().createElement("div",{className:"slds-chat-message__meta","aria-label":"said ".concat(e.name," at ").concat(e.timeStamp)},e.isPast?l().createElement("b",null,e.name):e.name," • ",e.timeStamp)},b=function(e){return l().createElement("div",{className:"slds-chat-message__text_delivery-failure-reason",role:"alert"},l().createElement(_,{symbol:"error"}),l().createElement("span",null,e.children))},h=function(e){return l().createElement("button",{className:"slds-button slds-chat-message__action slds-m-top_xxx-small"},l().createElement(m.UtilityIcon,{assistiveText:!1,title:!1,className:"slds-icon_xx-small",containerClassName:"slds-chat-icon",symbol:e.symbol}),l().createElement("span",null,e.actionTitle))},g=function(e){return l().createElement(s.eu,{className:"slds-avatar_circle slds-chat-avatar",ariaHidden:e.ariaHidden},l().createElement("abbr",{className:"slds-avatar__initials slds-avatar__initials_inverse",title:e.name},e.initials))},f=function(e){return l().createElement("div",{className:r()("slds-chat-event",{"slds-has-error":e.hasError}),role:e.hasError&&"alert"},l().createElement("div",{className:"slds-chat-event__body"},l().createElement(_,{symbol:e.symbol,assistiveText:e.iconAssistiveText}),l().createElement("p",null,e.children," • ",e.timeStamp)),e.agentMessage&&l().createElement("div",{className:"slds-chat-event__agent-message"},e.agentMessage))},v=function(e){return l().createElement("div",{className:r()("slds-chat-bookend",{"slds-chat-bookend_stop":"stop"===e.type})},l().createElement(_,{symbol:"start"===e.type?"chat":"end_chat"}),l().createElement("p",null,"Chat ","stop"===e.type?"ended":"started"," by ",l().createElement("b",null,e.name)," ","• ",e.timeStamp))},_=function(e){return l().createElement(m.UtilityIcon,{assistiveText:e.assistiveText||!1,className:r()("slds-icon_x-small slds-icon-text-default",{"slds-icon-text-default":"error"===e.symbol,"slds-icon-text-warning":"warning"===e.symbol}),containerClassName:"slds-chat-icon",symbol:e.symbol,title:e.assistiveText||!1})},T=n(679),S=n(769),W=[{id:"default",label:"Default",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(y,{type:"inbound",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},"Hi, my CloudWidget only speaks French")))))}],M=[{id:"inbound-with-avatar",label:"Inbound With Avatar",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},"Hi, my CloudWidget only speaks French and I'm having a lot of trouble. I've followed this article but it doesn't work"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"https://www.somehelpsite.com/CloudWidget-speaks-french"))))))},{id:"inbound-customer-is-typing",label:"Inbound Customer is Typing",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{isTyping:!0,type:"inbound"})))))},{id:"inbound-customer-is-typing-with-sneak-peek",label:"Inbound Customer is Typing with Sneak Peek",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{isTyping:!0,hasSneakPeek:!0,type:"inbound"},"Hi, my CloudWidget only speaks French and I'm having a lot of trouble trying to make i")))))},{id:"inbound-with-attachment",label:"Inbound With Attachment",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},l().createElement(S.DoctypeIcon,{assistiveText:"Attachment",className:"slds-icon_small",containerClassName:"slds-chat-icon",symbol:"attachment",title:"Attachment"}),l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"filename_of_attachment.jpg"))))))},{id:"inbound-with-loading-attachment-no-title",label:"Inbound With Loading Attachment Without Title",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound",messageType:"image",name:"Taylor Watson-Rice",timeStamp:"4:59 PM",isLoading:!0},l().createElement(T.Z,{has4x3Crop:!0,isLoading:!0,noCaption:!0}))))))},{id:"inbound-with-loading-attachment-with-title",label:"Inbound With Loading Attachment With Title",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound",messageType:"file",name:"Taylor Watson-Rice",timeStamp:"4:59 PM",isLoading:!0},l().createElement(T.Z,{has4x3Crop:!0,hasTitleCard:!0,sprite:"utility",symbol:"image",isLoading:!0}))))))},{id:"outbound",label:"Outbound",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound",name:"Amber Cann",timeStamp:"4:59 PM"},"Hi Taylor, thank you for contacting Widget Support. Can you please tell me what language you are trying to program on your CloudWidget?"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"http://www.cloud.widget"))))))},{id:"outbound-agent",label:"Outbound Other Agent",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound-agent",name:"Jason Dewar",timeStamp:"4:59 PM"},"So sorry to hear that. Let me transfer you to a more technical support member. Thank you for your patients. \n \n Have you tried visiting our help site?")))))},{id:"inbound-unsupported-type",label:"Inbound Unsupported Type",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"JD",name:"Jason Dewar",ariaHidden:"true"}),l().createElement(y,{type:"unsupported-type",name:"Jason Dewar",timeStamp:"4:59 PM"},"Message type is not supported")))))},{id:"outbound-delivery-failure",label:"Outbound Delivery Failure",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"delivery-failure",deliveryFailureReason:"Message was not delivered because Andy stopped receiving messages.",name:"Jason Dewar",timeStamp:"4:59 PM"},"It might be the cause of the problem")))))},{id:"event",label:"Event",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"event"},l().createElement(f,{symbol:"priority",timeStamp:"5:09 PM"},l().createElement("b",null,"Jason Dewar")," raised a flag"))))},{id:"event-agent-message",label:"Event - With agent message",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"event"},l().createElement(f,{agentMessage:"Andy needs help changing the language on his CloudWidget",symbol:"change_owner",timeStamp:"5:19 PM"},l().createElement("b",null,"Jason Dewar")," sent a transfer request to ",l().createElement("b",null,"Amber Cann")))))},{id:"event-error",label:"Event - Error",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"event"},l().createElement(f,{hasError:!0,symbol:"error",iconAssistiveText:"warning",timeStamp:"5:06 PM"},"The file sent by ",l().createElement("b",null,"Andy Martinez")," is too large"))))},{id:"bookend",label:"Bookend Start Chat",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"bookend"},l().createElement(v,{type:"start",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"}))))},{id:"bookend-stop",label:"Bookend Stop Chat",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"bookend"},l().createElement(v,{type:"stop",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"}))))}],w=[{id:"consecutive-inbound",label:"Consecutive Inbound",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound"},"Hi, my CloudWidget only speaks French"))),l().createElement(d,{type:"inbound"},l().createElement(p,{hasFauxAvatar:!0},l().createElement(y,{type:"inbound",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},"I'm having trouble changing that.")))))},{id:"consecutive-outbound",label:"Consecutive Outbound",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound"},"Hi Andy, thank you for contacting Widget Support. Can you please tell me what language you are trying to program on your CloudWidget?"))),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},"It might be the cause of the problem")))))},{id:"short-text",label:"Short Text",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},"Hi."))),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},"Hello.")))))},{id:"chat-list",label:"Chat List",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"bookend"},l().createElement(v,{type:"start",name:"Andy Martinez",timeStamp:"4:58 PM"})),l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"AM",name:"Andy Martinez",ariaHidden:"true"}),l().createElement(y,{type:"inbound",name:"Andy Martinez",timeStamp:"4:59 PM"},"Hi, my CloudWidget only speaks French"))),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound-agent"},"Hi Andy, thank you for contacting Widget Support. Can you please tell me what language you are trying to program on your CloudWidget?"))),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound-agent",name:"Jason Dewar",timeStamp:"5:02 PM"},"Have you tried turning it off and on again?"))),l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"AM",name:"Andy Martinez",ariaHidden:"true"}),l().createElement(y,{type:"inbound",name:"Andy Martinez",timeStamp:"5:09 PM"},"yes, of course"))),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound-agent",name:"Jason Dewar",timeStamp:"5:15 PM"},"Sorry to hear that. Let me transfer you to a more technical support member. Thank you for your patients!"))),l().createElement(d,{type:"event"},l().createElement(f,{agentMessage:"Andy needs help changing the language on his CloudWidget",symbol:"change_owner",timeStamp:"5:19 PM"},l().createElement("b",null,"Jason Dewar")," sent a transfer request to"," ",l().createElement("b",null,"Technical Support Team"))),l().createElement(d,{type:"event"},l().createElement(f,{symbol:"change_owner",timeStamp:"5:20 PM"},l().createElement("b",null,"Technical Support Team")," accepted the transfer request")),l().createElement(d,{type:"event"},l().createElement(f,{symbol:"change_owner",timeStamp:"5:22 PM"},l().createElement("b",null,"Amber Cann")," accepted this chat")),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound",name:"Amber Cann",timeStamp:"5:23 PM"},"Hi Andy, my name is Amber and I can help you solve your issue."))),l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"AM",name:"Andy Martinez",ariaHidden:"true"}),l().createElement(y,{type:"inbound",name:"Andy Martinez",timeStamp:"5:29 PM"},"Nevermind, I speak french."))),l().createElement(d,{type:"bookend"},l().createElement(v,{type:"stop",name:"Andy Martinez",timeStamp:"5:30 PM"}))))},{id:"conversation-with-attachments",label:"Conversation With Attachments",element:l().createElement(c,null,l().createElement(u,null,l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound",messageType:"image",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},l().createElement(T.Z,{hasActions:!0,iconColor:"white",noCaption:!0,hasImage:!0})))),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound",messageType:"image",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},l().createElement(T.Z,{hasTitleCard:!0,symbol:"image",title:"Image.jpg",hasActions:!0,hasImagePortrait:!0})))),l().createElement(d,{type:"inbound"},l().createElement(p,null,l().createElement(g,{initials:"TW",name:"Taylor Watson-Rice",ariaHidden:"true"}),l().createElement(y,{type:"inbound",messageType:"file",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},l().createElement(T.Z,{has4x3Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"File.pdf",hasActions:!0,hasImage:!0})))),l().createElement(d,{type:"outbound"},l().createElement(p,null,l().createElement(y,{type:"outbound",messageType:"file",name:"Taylor Watson-Rice",timeStamp:"4:59 PM"},l().createElement(T.Z,{has4x3Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"File.pdf",hasActions:!0,hasImage:!0}))))))}]}},n={};function a(e){var l=n[e];if(void 0!==l)return l.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,a),i.exports}a.m=t,a.amdO={},e=[],a.O=function(t,n,l,i){if(!n){var r=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],i=e[c][2];for(var s=!0,m=0;m<n.length;m++)(!1&i||r>=i)&&Object.keys(a.O).every(function(e){return a.O[e](n[m])})?n.splice(m--,1):(s=!1,i<r&&(r=i));if(s){e.splice(c--,1);var o=l();void 0!==o&&(t=o)}}return t}i=i||0;for(var c=e.length;c>0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[n,l,i]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4250,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2274:0,2782:0,3140:0,4250:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,7999:0,8167:0,8458:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,i,r=n[0],s=n[1],m=n[2],o=0;if(r.some(function(t){return 0!==e[t]})){for(l in s)a.o(s,l)&&(a.m[l]=s[l]);if(m)var c=m(a)}for(t&&t(n);o<r.length;o++)i=r[o],a.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return a.O(c)},n=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),a.nc=void 0;var l=a.O(void 0,[6790],function(){return a(4613)});l=a.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/chat/base/example.jsx.js"]=l}();