docs: add credits, hide on mobile (#658)

Yonom · Aug 7, 2024 · ae61f0c · ae61f0c
1 parent 14116ce
commit ae61f0c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/apps/docs/components/docs-chat/DocsChat.tsx b/apps/docs/components/docs-chat/DocsChat.tsx
@@ -3,6 +3,7 @@
 import { FC } from "react";
 import {
   AssistantModal,
+  AssistantModalPrimitive,
   ChatModelAdapter,
   useLocalRuntime,
 } from "@assistant-ui/react";
@@ -11,6 +12,11 @@ import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-high
 import { coldarkDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import remarkGfm from "remark-gfm";
 import { Thread, type ThreadConfig } from "@assistant-ui/react";
+import entelligenceLogoLight from "./entelligence-light.png";
+import entelligenceLogoDark from "./entelligence-dark.png";
+import Image from "next/image";
+import Composer from "@assistant-ui/react/ui/composer";
+import ThreadWelcome from "@assistant-ui/react/ui/thread-welcome";
 
 function asAsyncIterable<T>(source: ReadableStream<T>): AsyncIterable<T> {
   return {
@@ -80,7 +86,7 @@ export const DocsChat = () => {
     <MyAssistantModal
       runtime={runtime}
       welcome={{
-        message: "Ask me anything about the docs!",
+        message: "Ask any question about assistant-ui",
       }}
       assistantMessage={{ components: { Text: MarkdownText } }}
     />
@@ -90,10 +96,58 @@ export const DocsChat = () => {
 const MyAssistantModal: FC<ThreadConfig> = (config) => {
   return (
     <AssistantModal.Root config={config}>
-      <AssistantModal.Trigger />
+      <MyAssistantModalTrigger />
       <AssistantModal.Content className="h-[800px] w-[600px]">
-        <Thread />
+        <MyThread />
       </AssistantModal.Content>
     </AssistantModal.Root>
   );
 };
+
+const MyAssistantModalTrigger: FC = () => {
+  return (
+    <AssistantModal.Anchor className="hidden md:block">
+      <AssistantModalPrimitive.Trigger asChild>
+        <AssistantModal.Button />
+      </AssistantModalPrimitive.Trigger>
+    </AssistantModal.Anchor>
+  );
+};
+
+const MyThread: FC = () => {
+  return (
+    <Thread.Root className="flex flex-col">
+      <Thread.Viewport>
+        <ThreadWelcome />
+
+        <Thread.Messages />
+
+        <Thread.ViewportFooter className="pb-3">
+          <Thread.ScrollToBottom />
+          <Composer />
+        </Thread.ViewportFooter>
+      </Thread.Viewport>
+
+      <a
+        href="https://entelligence.ai"
+        className="text-muted-foreground flex w-full items-center justify-center gap-2 border-t py-2 text-xs"
+      >
+        In partnership with{" "}
+        <Image
+          src={entelligenceLogoLight}
+          className="dark:hidden"
+          alt="Entelligence Logo"
+          height={14}
+          width={113}
+        />
+        <Image
+          src={entelligenceLogoDark}
+          className="hidden dark:block"
+          alt="Entelligence Logo"
+          height={14}
+          width={113}
+        />
+      </a>
+    </Thread.Root>
+  );
+};
diff --git a/apps/docs/components/docs-chat/entelligence-dark.png b/apps/docs/components/docs-chat/entelligence-dark.png
diff --git a/apps/docs/components/docs-chat/entelligence-light.png b/apps/docs/components/docs-chat/entelligence-light.png
diff --git a/packages/react/src/ui/assistant-modal.tsx b/packages/react/src/ui/assistant-modal.tsx
@@ -130,6 +130,8 @@ const exports = {
   Root: AssistantModalRoot,
   Trigger: AssistantModalTrigger,
   Content: AssistantModalContent,
+  Button: AssistantModalButton,
+  Anchor: AssistantModalAnchor,
 };
 
 export default Object.assign(AssistantModal, exports) as typeof AssistantModal &