feat(chat): add support for inline magazine sections and enhance content extraction

- Updated ChatMessage component to display a button for viewing brief magazine sections when available.
- Enhanced useContentPanel to extract and manage magazine sections, improving content organization.
- Refactored extractMagazineSections function to comprehensively handle various content formats, including headings and bullet points.
- Improved formatting of content to preserve bold text and newlines as paragraphs.

Made-with: Cursor

packages/app/src/components/content/MagazineGrid.vue

@@ -128,8 +128,11 @@
           </div>
         </article>
 
-        <!-- Secondary stories grid -->
-        <div class="grid sm:grid-cols-2 gap-4">
+        <!-- Secondary stories grid (single col when many sections for readability) -->
+        <div
+          class="gap-4"
+          :class="sections.length > 4 ? 'flex flex-col' : 'grid sm:grid-cols-2'"
+        >
           <article
             v-for="(section, i) in sections.slice(1)"
             :key="i"
@@ -278,12 +281,14 @@ const headlineText = computed(() => {
   return q.length > 100 ? q.slice(0, 97) + '…' : q
 })
 
-/** Render content with **bold** preserved (sanitized). */
+/** Render content with **bold** preserved and newlines as paragraphs (sanitized). */
 function formatContent(text: string): string {
-  return text
+  const safe = text
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
     .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+  const withParas = safe.replace(/\n\n+/g, '</p><p class="mt-2">').replace(/\n/g, '<br/>')
+  return `<p>${withParas}</p>`
 }
 </script>