feat: powered by Voiceflow is a link now (DSN-2505) (#285)

apps/documentation/src/pages/chat.tsx

@@ -10,7 +10,7 @@ export default function ChatPage(props: any) {
   return (
     <div style={{ position: 'relative' }}>
       You can switch projects by changing the URL `projectID=...`
-      <ChatScript projectID={props.projectID} />
+      {props.projectID && <ChatScript projectID={props.projectID} />}
     </div>
   );
 }

apps/documentation/src/pages/compositions/widget-page-component.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { StoryEmbed } from '../../components/StoryEmbed';
+
+export default function ChatWidgetStories() {
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    setShouldRender(true);
+  }, []);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '32px', margin: '32px 0' }}>
+      # Chat Demo ## Base
+      <div style={{ width: '400px' }}>
+        <StoryEmbed for="NewChat" name="Base" />
+      </div>
+      ## Themed
+      <StoryEmbed for="NewChat" name="Themed" />
+      ## No Powered By
+      <div style={{ width: '400px' }}>
+        <StoryEmbed for="NewChat" name="NoPoweredBy" />
+        ### No Footer at all
+        <StoryEmbed for="NewChat" name="NoFooterLinks" />
+        ### Chat ended
+        <StoryEmbed for="NewChat" name="ChatEnded" />
+      </div>
+    </div>
+  );
+}

apps/documentation/src/pages/compositions/widget.mdx

@@ -1,31 +1,5 @@
-import { StoryEmbed } from '../../components/StoryEmbed';
-import { ClientRenderer } from '../../components/ClientRenderer';
+import ChatWidgetStories from './widget-page-component.tsx';
 
-# Chat Demo
+## Chat Widget
 
-## Base
-
-<div style={{ width: '400px' }}>
-  <StoryEmbed for="NewChat" name="Base" />
-</div>
-
-## Themed
-
-<StoryEmbed for="NewChat" name="Themed" />
-
-## No Powered By
-
-<div style={{ width: '400px' }}>
-
-<StoryEmbed for="NewChat" name="NoPoweredBy" />
-
-### No Footer at all
-
-<StoryEmbed for="NewChat" name="NoFooterLinks" />
-
-### Chat ended
-
-<StoryEmbed for="NewChat" name="ChatEnded" />
-
-
-</div>
+<ChatWidgetStories />

packages/chat/src/components/NewFooter/NewFooter.css.ts

@@ -102,3 +102,20 @@ export const extraLinkStyles = style({
     },
   },
 });
+
+export const voiceflowLink = style({
+  color: COLORS.NEUTRAL_DARK[100],
+  textDecoration: 'underline',
+  textDecorationColor: 'transparent',
+  transition: transition(['color', 'text-decoration-color']),
+  selectors: {
+    '&:hover': {
+      color: COLORS.ACCENT[500],
+      textDecorationColor: COLORS.ACCENT[500],
+    },
+    '&:active': {
+      color: COLORS.ACCENT[600],
+      textDecorationColor: 'transparent',
+    },
+  },
+});

packages/chat/src/components/NewFooter/index.tsx

@@ -13,8 +13,11 @@ import {
   footerLinksContainer,
   messageContainer,
   separator,
+  voiceflowLink,
 } from './NewFooter.css';
 
+const VOICEFLOW_URL = 'https://www.voiceflow.com/';
+
 export interface INewFooter {
   buttons?: { label: string; onClick: () => void }[];
   showPoweredBy?: boolean;
@@ -66,7 +69,13 @@ export const NewFooter: React.FC<INewFooter> = ({
           <MessageInput {...messageInputProps} />
         )}
         <div className={footerLinksContainer}>
-          {showPoweredBy && <div>Powered by Voiceflow</div>}
+          {showPoweredBy && (
+            <div>
+              <a href={VOICEFLOW_URL} target="_blank" rel="noreferrer" className={voiceflowLink}>
+                Powered by Voiceflow
+              </a>
+            </div>
+          )}
           {showPoweredBy && showExtraLink && <div className={separator} />}
           {showExtraLink && (
             <a href={extraLinkUrl} target="_blank" className={extraLinkStyles}>