Merge pull request #21 from baaalint/feat/tables

fix(chat): add basic markdown compatibility
mlrun · Sep 13, 2024 · 03a922f · 03a922f
2 parents 004acf5 + 961a0b9
commit 03a922f
Show file tree

Hide file tree

Showing 8 changed files with 3,117 additions and 1,637 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -21,6 +21,7 @@
     "@tanstack/query-core": "^5.40.0",
     "@tanstack/react-query": "^5.40.1",
     "axios": "^1.7.2",
+    "chakra-ui-markdown-renderer": "^4.1.0",
     "framer-motion": "^11.2.10",
     "jotai": "^2.8.3",
     "jotai-tanstack-query": "^0.8.5",
@@ -29,7 +30,11 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.23.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "rollup": "^4.20.0",
+    "vfile": "^6.0.3",
+    "vfile-message": "^4.0.2",
     "wonka": "^6.3.4"
   },
   "devDependencies": {

diff --git a/ui/src/components/feature/ChatMessage.tsx b/ui/src/components/feature/ChatMessage.tsx
@@ -13,9 +13,10 @@
 // limitations under the License.
 
 import { isTypingAtom } from '@atoms/index'
+import ChakraUIRenderer from 'chakra-ui-markdown-renderer'
 import { useAtom } from 'jotai'
 import React from 'react'
-import Markdown from 'react-markdown'
+import ReactMarkdown from 'react-markdown'
 import TypingText from './TypingText'
 
 interface ChatMessageProps {
@@ -28,7 +29,11 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
   if (isTyping) {
     return <TypingText text={message} />
   }
-  return <Markdown>{message}</Markdown>
+  return (
+    <ReactMarkdown skipHtml components={ChakraUIRenderer()}>
+      {message}
+    </ReactMarkdown>
+  )
 }
 
 export default ChatMessage
diff --git a/ui/src/components/feature/ChatSessionList.tsx b/ui/src/components/feature/ChatSessionList.tsx
@@ -75,7 +75,7 @@ const ChatSessionList = (props: Props) => {
 
   const deleteSession = async () => {
     try {
-      await Client.deleteSession(username, selectedSession).then(res => {
+      await Client.deleteSession(username, selectedSession.name).then(res => {
         if (!res.error) {
           toast({
             title: 'Session deleted',

diff --git a/ui/src/components/feature/WorkflowsTable.tsx b/ui/src/components/feature/WorkflowsTable.tsx
@@ -48,7 +48,7 @@ const WorkflowsTable: React.FC = () => {
     description: '',
     owner_id: '',
     project_id: '',
-    workflow_type: WorkflowType.DEPLOYMENT,
+    workflow_type: WorkflowType.APPLICATION,
     deployment: ''
   })
   const [filterText, setFilterText] = useState('')
@@ -154,7 +154,7 @@ const WorkflowsTable: React.FC = () => {
               description: '',
               owner_id: '',
               project_id: '',
-              workflow_type: WorkflowType.DEPLOYMENT,
+              workflow_type: WorkflowType.APPLICATION,
               deployment: ''
             })
             onModalOpen()

diff --git a/ui/src/components/shared/Bubble.tsx b/ui/src/components/shared/Bubble.tsx
@@ -36,12 +36,13 @@ const Bubble = ({ bot, content }: Props) => {
   return (
     <Flex gap={10} flexDirection={'column'}>
       {bot == 'AI' ? (
-        <Flex role={'group'} alignItems={'flex-start'} gap={4}>
+        <Flex maxW={'800px'} role={'group'} alignItems={'flex-start'} gap={4}>
           <ChatIcon marginTop={2} />
           <Flex>{!content && !isMessageError && <Spinner size={'sm'} />}</Flex>
           {!!content && (
             <>
               <Flex
+                direction={'column'}
                 padding={4}
                 borderRadius={6}
                 bg={colorMode === 'dark' ? colors.gray800 : colors.gray300}