The application is able to use external element to return AI tags

dimitardanailov · Jul 21, 2024 · 356802b · 356802b
1 parent 510799f
commit 356802b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/...c/app/articles/2024/06/26/[slug]/Body.tsx → ...pp/articles/2024/06/26/[slug]/Article.tsx b/...c/app/articles/2024/06/26/[slug]/Body.tsx → ...pp/articles/2024/06/26/[slug]/Article.tsx
@@ -1,4 +1,7 @@
 import Label from '@/components/SimpleLabel'
+import TopicAnalysisTable from '@/components/TopicAnalysisTable'
+
+import {topicAnalysis} from './db'
 
 const Body = () => {
   const listStyle = 'list-disc mx-6 mt-0 mb-5'
@@ -83,6 +86,8 @@ const Body = () => {
           performance benefits.
         </li>
       </ul>
+
+      <TopicAnalysisTable topicAnalysis={topicAnalysis} />
     </>
   )
 }

diff --git a/apps/website/src/app/articles/2024/06/26/[slug]/Content.tsx b/apps/website/src/app/articles/2024/06/26/[slug]/Content.tsx
@@ -2,27 +2,23 @@
 
 import {Slogan} from '@/styled-components'
 
-import TopicAnalysisTable from '@/components/TopicAnalysisTable'
-import Body from './Body'
+import Article from './Article'
 
 // import Mermaid from './Mermaid'
 
 import {slogan} from './seo'
-import {topicAnalysis} from './db'
-
 import Tags from './Tags'
 
 // import diagram from './diagram'
 
 const Content = () => {
   return (
     <article>
-      <Tags component="test" />
       <Slogan>{slogan}</Slogan>
 
-      <Body />
+      <Article />
 
-      <TopicAnalysisTable topicAnalysis={topicAnalysis} />
+      <Tags component={Article} />
     </article>
   )
 }

diff --git a/apps/website/src/app/articles/2024/06/26/[slug]/Tags.tsx b/apps/website/src/app/articles/2024/06/26/[slug]/Tags.tsx
@@ -5,17 +5,13 @@ import {FC, useEffect, useState} from 'react'
 import {createGoogleGenerativeAI} from '@ai-sdk/google'
 import {generateText} from 'ai'
 
-import Body from './Body'
-
 export interface Props {
-  component: string
+  component: () => JSX.Element
 }
 
 const Tags: FC<Props> = ({component}) => {
   const [aiTags, setPromtPresponse] = useState<Array<string>>([])
 
-  console.log('Body', Body)
-
   useEffect(() => {
     if (aiTags.length > 0) return
 
@@ -26,15 +22,17 @@ const Tags: FC<Props> = ({component}) => {
 
     generateText({
       model,
-      prompt: `From the following react component: ${Body} please create five tags. Tags should be return as a plain text seperated with with comma`,
+      prompt: `From the following react component: ${component} please create five tags. Tags should be return as a plain text seperated with with comma`,
     }).then(response => {
       const tags = response.text.split(',')
 
       setPromtPresponse(tags)
     })
-  }, [aiTags])
+  }, [aiTags, component])
+
+  if (aiTags.length === 0) return
 
-  return <>{aiTags.join(',')}</>
+  return <div className="mt-2 mb-2">Tags: {aiTags.join(',')}</div>
 }
 
 export default Tags