embeds support

README.md

@@ -48,6 +48,7 @@ theme via Tailwind.
   - Code Highlighting
   - Tables
   - JSON
+  - Embeds
 - File Uploads
 - Animations
 - Conversation Pagination

package.json

@@ -42,7 +42,8 @@
     "reablocks": "^8.4.3",
     "react-markdown": "^9.0.1",
     "reakeys": "^2.0.3",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "remark-youtube": "^1.3.2"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^8.2.6",

src/SessionMessages/SessionMessage.tsx

@@ -8,6 +8,7 @@ import ThumbUpIcon from '@/assets/thumbs-up.svg?react';
 import RefreshIcon from '@/assets/refresh.svg?react';
 import { PluggableList } from 'react-markdown/lib';
 import { Markdown } from '@/Markdown';
+import remarkYoutube from 'remark-youtube';
 
 export interface SessionMessageProps {
   /**
@@ -67,7 +68,7 @@ export const SessionMessage: FC<SessionMessageProps> = ({
   onDownvote,
   onRefresh
 }) => {
-  const { theme, remarkPlugins = [remarkGfm] } = useContext(SessionsContext);
+  const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } = useContext(SessionsContext);
 
   const handleCopy = (text: string) => {
     navigator.clipboard

stories/Demos.stories.tsx

@@ -165,6 +165,86 @@ export const CustomComponents = () => {
   );
 };
 
+export const Embeds = () => {
+  const fakeSessionsWithEmbeds: Session[] = [
+    {
+      id: '1',
+      title: 'Session with Embeds',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      conversations: [
+        {
+          id: '1',
+          question: 'Can you show me a video about React?',
+          response: `
+  ## Watch this video
+
+  https://youtu.be/enTFE2c68FQ
+
+  https://www.youtube.com/watch?v=enTFE2c68FQ
+
+  These links showcase a video about React basics. You can click on either link to watch the video.`,
+          createdAt: new Date(),
+          updatedAt: new Date()
+        },
+        {
+          id: '2',
+          question: 'Do you have another video recommendation?',
+          response: `
+  Certainly! Here's another great video about web development:
+
+  ## Check out this tutorial
+
+  https://www.youtube.com/watch?v=dQw4w9WgXcQ
+
+  This video covers some interesting web development concepts.`,
+          createdAt: new Date(),
+          updatedAt: new Date()
+        }
+      ]
+    }
+  ];
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        background: '#02020F',
+        borderRadius: 5
+      }}
+    >
+      <Sessions
+        sessions={fakeSessionsWithEmbeds}
+        viewType="console"
+        onDeleteSession={() => alert('delete!')}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups>
+            {groups =>
+              groups.map(({ heading, sessions }) => (
+                <SessionsGroup heading={heading} key={heading}>
+                  {sessions.map(s => <SessionListItem key={s.id} session={s} />)}
+                </SessionsGroup>
+              ))
+            }
+          </SessionGroups>
+        </SessionsList>
+        <div className="flex-1 h-full flex flex-col">
+          <SessionMessages />
+          <SessionInput />
+        </div>
+      </Sessions>
+    </div>
+  );
+};
+
 // export const NewSessionContent = () => {
 //   return (
 //     <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20, margin: 20, background: '#02020F', borderRadius: 5 }}>