Profile Description

1'use client';
2 
3import React, { useState } from 'react';
4import { useProfile } from '@/hooks/useProfile';
5import { cn } from '@/lib/utils/deso';
6import { Button } from '@/components/ui/button';
7 
8export interface ProfileDescriptionProps {
9  publicKey: string;
10  className?: string;
11  lineClamp?: number;
12  showMoreText?: string;
13  showLessText?: string;
14  formatted?: boolean;
15}
16 
17/**
18 * Formats a description string by converting URLs and @mentions to links and preserving line breaks.
19 */
20function formatDescription(text: string): React.ReactNode[] {
21  // Convert URLs to links
22  const urlRegex = /(https?:\/\/[^\s]+)/g;
23  // Convert @mentions to links (assume /u/username route)
24  const mentionRegex = /(^|\s)(@[a-zA-Z0-9_]+)/g;
25 
26  // Split by newlines to preserve line breaks
27  return text.split(/\n/).map((line, i) => {
28    // URLs
29    let formatted = line.replace(urlRegex, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
30    // Mentions
31    formatted = formatted.replace(mentionRegex, (match, space, handle) => `${space}<a href="/u/${handle.slice(1)}" class="text-primary underline">${handle}</a>`);
32    return <span key={i} dangerouslySetInnerHTML={{ __html: formatted }} />;
33  });
34}
35 
36export const ProfileDescription = ({
37  publicKey,
38  className,
39  lineClamp,
40  showMoreText = 'Show more',
41  showLessText = 'Show less',
42  formatted = true,
43}: ProfileDescriptionProps) => {
44  const { profile, loading, error } = useProfile(publicKey);
45  const [isExpanded, setIsExpanded] = useState(false);
46 
47  const description = profile?.description || '';
48 
49  // Only apply truncation logic if lineClamp is provided.
50  const shouldTruncate =
51    !!lineClamp && description.length > lineClamp * 50;
52 
53  if (loading) {
54    return (
55      <div className="animate-pulse bg-gray-200 dark:bg-gray-800 h-24 rounded"></div>
56    );
57  }
58 
59  if (error || !description) {
60    return null;
61  }
62 
63  const isCurrentlyClamped = shouldTruncate && !isExpanded;
64 
65  const style =
66    isCurrentlyClamped && lineClamp
67      ? {
68          display: '-webkit-box',
69          WebkitBoxOrient: 'vertical' as const,
70          WebkitLineClamp: lineClamp,
71          overflow: 'hidden',
72          textOverflow: 'ellipsis',
73        }
74      : {};
75 
76  return (
77    <div className={cn('relative', className)}>
78      <div style={style}>
79        {formatted
80          ? (isCurrentlyClamped
81              ? formatDescription(description)
82                  .slice(0, lineClamp ? lineClamp : undefined)
83// … truncated