Front fixes - Logs error and server components (#741)

Fixing this errors related to server components insider client
components


![image](https://github.com/user-attachments/assets/3e5ec71b-9cd1-42e7-970e-3e2807f165d6)


<!-- This is an auto-generated comment: release notes by OSS
Entelligence.AI -->
### Summary by Entelligence.AI

- Refactor: Enhanced the `IdentifyPlugin` component to handle loading
states and error components, improving user experience during data
retrieval.
- Style: Adjusted the styling attributes of certain components for
better visual consistency.
- Chore: Cleaned up redundant empty lines in the code for improved
readability and maintainability.
- Refactor: Updated the rendering location of the `Plugins` component in
the `Summary` component, optimizing the conditional rendering based on
the length of `memory.plugins_results`.
<!-- end of auto-generated comment: release notes by OSS Entelligence.AI
-->

frontend/src/components/memories/plugins/plugins.tsx

@@ -1,8 +1,6 @@
 import { PluginsResult } from '@/src/types/memory.types';
 import Markdown from 'markdown-to-jsx';
-import { Suspense } from 'react';
 import IndentifyPlugin from '../../plugins/indentify-plugin';
-import IdentifyPluginLoader from '../../plugins/identify-plugin-loader';
 import { ErrorBoundary } from 'next/dist/client/components/error-boundary';
 import ErrorIdentifyPlugin from '../../plugins/error-identify-plugin';
 
@@ -19,9 +17,7 @@ export default function Plugins({ plugins }: PluginsProps) {
           return (
             <div key={index}>
               <ErrorBoundary errorComponent={ErrorIdentifyPlugin}>
-                <Suspense fallback={<IdentifyPluginLoader />}>
-                  <IndentifyPlugin pluginId={puglin.plugin_id} />
-                </Suspense>
+                <IndentifyPlugin pluginId={puglin.plugin_id} />
               </ErrorBoundary>
               <div className="bg-[#0f0f0f] px-4 md:px-12">
                 <Markdown className="prose prose-slate text-white md:prose-lg prose-p:m-0 prose-p:mt-3 prose-p:text-white last:prose-p:mt-8 last:prose-p:rounded-lg last:prose-p:bg-zinc-900 last:prose-p:p-2 last:prose-p:px-4 last:prose-p:text-zinc-200 prose-strong:text-white prose-ul:my-0 prose-ul:list-disc prose-li:text-zinc-300 md:last:prose-p:text-sm">

frontend/src/components/memories/summary/sumary.tsx

@@ -18,13 +18,13 @@ export default function Summary({ memory }: SummaryProps) {
           <p className="mt-4 text-gray-400">No overview available for this memory.</p>
         )}
       </div>
-      {memory.plugins_results.length > 0 && <Plugins plugins={memory.plugins_results} />}
       {memory?.structured?.action_items?.length > 0 && (
         <ActionItems items={memory.structured.action_items} />
       )}
       {memory?.structured?.events?.length > 0 && (
         <MemoryEvents events={memory.structured.events} />
       )}
+      {memory.plugins_results.length > 0 && <Plugins plugins={memory.plugins_results} />}
     </div>
   );
 }

frontend/src/components/plugins/identify-plugin-loader.tsx

@@ -2,8 +2,8 @@ import { OnePointCircle } from 'iconoir-react';
 
 export default function IdentifyPluginLoader() {
   return (
-    <div className="sticky top-[4rem] z-[50] flex items-center gap-2 border-b border-solid border-zinc-900 bg-[#0f0f0f] bg-opacity-90 px-4 py-3 shadow-sm backdrop-blur-sm md:px-12">
-      <div className="grid h-9 w-9 place-items-center rounded-full bg-zinc-800">
+    <div className="sticky h-[69px] md:h-[73px] top-[4rem] z-[50] flex items-center gap-2 border-b border-solid border-zinc-900 bg-[#0f0f0f] bg-opacity-90 px-4 py-3 shadow-sm backdrop-blur-sm md:px-12">
+      <div className="grid h-[36px] w-[36px] place-items-center rounded-full bg-zinc-800">
         <OnePointCircle className="animate-spin text-xs" />
       </div>
       <div>

frontend/src/components/plugins/indentify-plugin.tsx

@@ -1,29 +1,57 @@
+'use client';
+
 import { getCommunityPlugin } from '@/src/actions/plugins/get-community-plugins';
+import { CommunityPlugin } from '@/src/types/plugins/plugins.types';
 import Image from 'next/image';
+import { Fragment, useEffect, useState } from 'react';
+import ErrorIdentifyPlugin from './error-identify-plugin';
+import IdentifyPluginLoader from './identify-plugin-loader';
 
 interface IndentifyPluginProps {
   pluginId: string;
 }
 
-export default async function IndentifyPlugin({ pluginId }: IndentifyPluginProps) {
-  const pluginCommunity = await getCommunityPlugin(pluginId);
-  if (!pluginCommunity) throw new Error('Plugin not found');
+export default function IndentifyPlugin({ pluginId }: IndentifyPluginProps) {
+  const [pluginCommunity, setPluginCommunity] = useState<CommunityPlugin | undefined>(
+    undefined,
+  );
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getCommunityPlugin(pluginId)
+      .then((plugin) => {
+        setPluginCommunity(plugin);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return <IdentifyPluginLoader />;
+  }
+
+  if (!pluginCommunity) {
+    return <ErrorIdentifyPlugin />;
+  }
+
 
   return (
-    <div className="sticky top-[4rem] z-[50] mb-3 flex items-center gap-2 border-b border-solid border-zinc-900 bg-[#0f0f0f] bg-opacity-90 px-4 py-3 shadow-sm backdrop-blur-sm md:px-12">
+    <Fragment>
+      <div className="sticky top-[4rem] z-[50] mb-3 flex items-center gap-2 border-b border-solid border-zinc-900 bg-[#0f0f0f] bg-opacity-90 px-4 py-3 shadow-sm backdrop-blur-sm md:px-12">
       <Image
         className="grid h-9 w-9 min-w-[36px] place-items-center rounded-full bg-zinc-700"
-        src={`https://raw.githubusercontent.com/BasedHardware/Friend/main/${pluginCommunity.image}`}
+        src={`https://raw.githubusercontent.com/BasedHardware/Friend/main/${pluginCommunity?.image}`}
         alt={''}
         width={50}
         height={50}
       />
       <div>
-        <h3 className="text-base font-semibold md:text-base">{pluginCommunity.name}</h3>
+        <h3 className="text-base font-semibold md:text-base">{pluginCommunity?.name}</h3>
         <p className="line-clamp-1 text-sm text-gray-500 md:text-base">
           {pluginCommunity.description}
         </p>
       </div>
     </div>
+    </Fragment>
+
   );
 }

frontend/src/components/shared/gleap.tsx

@@ -3,8 +3,6 @@ import { FC, ReactNode, useEffect } from 'react';
 import Gleap from 'gleap';
 import envConfig from '@/src/constants/envConfig';
 
-
-
 export const GleapInit: FC<{ children?: ReactNode }> = ({ children }) => {
   useEffect(() => {
     Gleap.initialize(envConfig.GLEAP_API_KEY ?? '');