@hanzo/ui 5.0.2 → 5.1.0

package/primitives/chat/message.tsx

@@ -1,569 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useTranslation } from '@hanzo_network/hanzo-i18n';
-import {
-  type ToolArgs,
-  ToolStatusType,
-} from '@hanzo_network/hanzo-message-ts/api/general/types';
-import {
-  type Artifact,
-  type FormattedMessage,
-} from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
-import { format } from 'date-fns';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Edit3, Loader2, RotateCcw, XCircle } from 'lucide-react';
-import { InfoCircleIcon } from 'primereact/icons/infocircle';
-import React, { Fragment, memo, useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { Link } from 'react-router';
-import { z } from 'zod';
-
-import { appIcon, ReactJsIcon, ToolsIcon } from '../../assets';
-import { formatText } from '../../helpers/format-text';
-import { cn } from '../src/utils';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '../accordion';
-import { Avatar, AvatarFallback } from '../avatar';
-import { Button } from '../button';
-import { Card, CardContent } from '../card';
-import { CopyToClipboardIcon } from '../copy-to-clipboard-icon';
-import { DotsLoader } from '../dots-loader';
-import { Form, FormField } from '../form';
-import { MarkdownText } from '../markdown-preview';
-import { PrettyJsonPrint } from '../pretty-json-print';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipPortal,
-  TooltipProvider,
-  TooltipTrigger,
-} from '../tooltip';
-import { ChatInputArea } from './chat-input-area';
-import { FileList } from './files-preview';
-// import { PythonCodeRunner } from './python-code-runner/python-code-runner';
-
-export const extractErrorPropertyOrContent = (
-  content: string,
-  property: 'error' | 'error_message',
-) => {
-  try {
-    const parsedContent = JSON.parse(content);
-    if (property in parsedContent) {
-      return parsedContent[property];
-    }
-  } catch {
-    /* ignore */
-  }
-  return String(content);
-};
-
-const containsPythonCode = (content: string): boolean => {
-  const pythonCodeRegex = /```python\s[\s\S]*?```/;
-  return pythonCodeRegex.test(content);
-};
-
-type MessageProps = {
-  messageId: string;
-  isPending?: boolean;
-  message: FormattedMessage;
-  handleRetryMessage?: () => void;
-  disabledRetry?: boolean;
-  disabledEdit?: boolean;
-  handleEditMessage?: (message: string) => void;
-  messageExtra?: React.ReactNode;
-
-  artifacts?: Artifact[];
-  artifact?: Artifact;
-  hidePythonExecution?: boolean;
-};
-
-const actionBar = {
-  rest: {
-    opacity: 0,
-    scale: 0.8,
-    transition: {
-      type: 'spring',
-      bounce: 0,
-      duration: 0.3,
-    },
-  },
-  hover: {
-    opacity: 1,
-    scale: 1,
-    transition: {
-      type: 'spring',
-      duration: 0.3,
-      bounce: 0,
-    },
-  },
-};
-
-type ArtifactProps = {
-  title: string;
-  type: string;
-  identifier: string;
-  loading?: boolean;
-  isSelected?: boolean;
-  onArtifactClick?: () => void;
-};
-const ArtifactCard = ({
-  title,
-  loading = true,
-  onArtifactClick,
-  isSelected,
-  identifier,
-}: ArtifactProps) => (
-  <Card
-    className={cn(
-      'w-full max-w-sm border border-gray-100',
-      isSelected && 'border-gray-50 bg-gray-300',
-    )}
-    onClick={() => {
-      onArtifactClick?.();
-    }}
-    role="button"
-  >
-    <CardContent className="flex items-center gap-1 p-1 py-1.5">
-      <div className="rounded-md p-2">
-        {loading ? (
-          <Loader2 className="text-text-secondary h-5 w-5 animate-spin" />
-        ) : (
-          <ReactJsIcon
-            className={cn(isSelected ? 'text-gray-50' : 'text-text-secondary')}
-          />
-        )}
-      </div>
-      <div className="flex flex-1 flex-col gap-0.5">
-        <p className="!mb-0 line-clamp-1 text-sm font-medium text-gray-50">
-          {title}
-        </p>
-        <p className="text-text-secondary !mb-0 text-xs">
-          {loading ? 'Generating...' : 'Click to preview'}
-        </p>
-      </div>
-    </CardContent>
-  </Card>
-);
-
-export const editMessageFormSchema = z.object({
-  message: z.string().min(1),
-});
-
-type EditMessageFormSchema = z.infer<typeof editMessageFormSchema>;
-
-const MessageBase = ({
-  message,
-  messageId,
-  isPending,
-  handleRetryMessage,
-  disabledRetry,
-  disabledEdit,
-  handleEditMessage,
-  hidePythonExecution,
-}: MessageProps) => {
-  const { t } = useTranslation();
-
-  const [editing, setEditing] = useState(false);
-
-  const editMessageForm = useForm<EditMessageFormSchema>({
-    resolver: zodResolver(editMessageFormSchema),
-    defaultValues: {
-      message: message.content,
-    },
-  });
-
-  const { message: currentMessage } = editMessageForm.watch();
-
-  const onSubmit = async (data: z.infer<typeof editMessageFormSchema>) => {
-    if (message.role === 'user') {
-      handleEditMessage?.(data.message);
-      setEditing(false);
-    }
-  };
-
-  useEffect(() => {
-    if (message.role === 'user') {
-      editMessageForm.reset({ message: message.content });
-    }
-  }, [editMessageForm, message.content]);
-
-  const pythonCode = useMemo(() => {
-    if (containsPythonCode(message.content)) {
-      const match = message.content.match(/```python\s([\s\S]*?)```/);
-      return match ? match[1] : null;
-    }
-    return null;
-  }, [message.content]);
-
-  return (
-    <motion.div
-      animate="rest"
-      className="pb-10"
-      data-testid={`message-${
-        message.role === 'user' ? 'local' : 'remote'
-      }-${message.messageId}`}
-      id={message.messageId}
-      initial="rest"
-      whileHover="hover"
-    >
-      <div
-        className={cn(
-          'relative flex flex-row space-x-2',
-          message.role === 'user' &&
-            'mr-0 ml-auto flex-row-reverse space-x-reverse',
-          message.role === 'assistant' && 'mr-auto ml-0 flex-row items-end',
-        )}
-      >
-        <a href={`#${messageId}`}>
-          <Avatar className={cn('mt-1 h-8 w-8')}>
-            {message.role === 'assistant' ? (
-              <img alt="Hanzo AI" src={appIcon} />
-            ) : null}
-          </Avatar>
-        </a>
-        <div
-          className={cn(
-            'container flex flex-col overflow-hidden bg-transparent text-sm text-white',
-            editing && 'w-full py-1',
-          )}
-        >
-          {editing ? (
-            <Form {...editMessageForm}>
-              <form
-                className="relative flex items-center"
-                onSubmit={editMessageForm.handleSubmit(onSubmit)}
-              >
-                <div className="w-full">
-                  <FormField
-                    control={editMessageForm.control}
-                    name="message"
-                    render={({ field }) => (
-                      <ChatInputArea
-                        bottomAddons={
-                          <div className="flex w-full items-center justify-between px-1">
-                            <div className="text-text-secondary flex items-center gap-1 text-xs">
-                              <InfoCircleIcon className="text-text-secondary h-3 w-3" />
-                              <span>{t('chat.editMessage.warning')}</span>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <Button
-                                className="min-w-[90px] rounded-lg"
-                                onClick={() => setEditing(false)}
-                                size="sm"
-                                variant="outline"
-                              >
-                                {t('common.cancel')}
-                              </Button>
-                              <Button
-                                className="min-w-[90px] rounded-lg"
-                                disabled={!currentMessage}
-                                onClick={editMessageForm.handleSubmit(onSubmit)}
-                                size="sm"
-                              >
-                                {t('common.send')}
-                              </Button>
-                            </div>
-                          </div>
-                        }
-                        onChange={field.onChange}
-                        onSubmit={editMessageForm.handleSubmit(onSubmit)}
-                        value={field.value}
-                      />
-                    )}
-                  />
-                </div>
-              </form>
-            </Form>
-          ) : (
-            <Fragment>
-              <div
-                className={cn(
-                  'relative mt-1 flex flex-col rounded-lg bg-black/40 px-3.5 pt-3 text-sm text-white',
-                  message.role === 'user'
-                    ? 'rounded-tr-none bg-gray-300'
-                    : 'rounded-bl-none border-none bg-gray-200',
-                  !message.content ? 'pb-3' : 'pb-4',
-                  editing && 'w-full py-1',
-                  message.role === 'assistant' &&
-                    isPending &&
-                    'relative overflow-hidden pb-4 before:absolute before:right-0 before:bottom-0 before:left-0 before:h-10 before:animate-pulse before:bg-gradient-to-l before:from-gray-200 before:to-gray-200/10',
-                )}
-              >
-                {message.role === 'assistant' &&
-                  message.toolCalls &&
-                  message.toolCalls.length > 0 && (
-                    <Accordion
-                      className="space-y-1.5 self-baseline pb-3"
-                      type="multiple"
-                    >
-                      {message.toolCalls.map((tool, index) => {
-                        return (
-                          <AccordionItem
-                            className="bg-bg-secondary overflow-hidden rounded-lg"
-                            disabled={tool.status !== ToolStatusType.Complete}
-                            key={`${tool.name}-${index}`}
-                            value={tool.name}
-                          >
-                            <AccordionTrigger
-                              className={cn(
-                                'min-w-[10rem] py-0 pr-2 no-underline hover:no-underline',
-                                'hover:bg-bg-default [&[data-state=open]]:bg-bg-default transition-colors',
-                                tool.status !== ToolStatusType.Complete &&
-                                  '[&>svg]:hidden',
-                              )}
-                            >
-                              <ToolCard
-                                args={tool.args}
-                                name={tool.name}
-                                status={tool.status ?? ToolStatusType.Complete}
-                                toolRouterKey={tool.toolRouterKey}
-                              />
-                            </AccordionTrigger>
-                            <AccordionContent className="bg-gray-450 flex flex-col gap-1 overflow-x-scroll rounded-b-lg px-3 pt-2 pb-3 text-xs">
-                              {Object.keys(tool.args).length > 0 && (
-                                <span className="font-medium text-white">
-                                  {tool.name}(
-                                  {Object.keys(tool.args).length > 0 && (
-                                    <span className="text-text-secondary font-mono font-medium">
-                                      {JSON.stringify(tool.args)}
-                                    </span>
-                                  )}
-                                  )
-                                </span>
-                              )}
-                              {tool.result && (
-                                <div>
-                                  <span>Response:</span>
-                                  <span className="text-text-secondary font-mono break-all">
-                                    <PrettyJsonPrint json={tool.result} />
-                                  </span>
-                                </div>
-                              )}
-                            </AccordionContent>
-                          </AccordionItem>
-                        );
-                      })}
-                    </Accordion>
-                  )}
-                {message.role === 'assistant' && (
-                  <MarkdownText
-                    content={extractErrorPropertyOrContent(
-                      message.content,
-                      'error_message',
-                    )}
-                    isRunning={
-                      !!message.content && message.status.type === 'running'
-                    }
-                  />
-                )}
-
-                {message.role === 'user' && (
-                  <div className="whitespace-pre-line">{message.content}</div>
-                )}
-
-                {message.role === 'assistant' &&
-                  message.status.type === 'running' &&
-                  message.content === '' && (
-                    <div className="pt-1.5 whitespace-pre-line">
-                      <DotsLoader />
-                    </div>
-                  )}
-                {/*{pythonCode && !hidePythonExecution && (*/}
-                {/*  <PythonCodeRunner code={pythonCode} />*/}
-                {/*)}*/}
-                {message.role === 'user' && !!message.attachments.length && (
-                  <FileList
-                    className="mt-2 max-w-[70vw] min-w-[200px]"
-                    files={message.attachments}
-                  />
-                )}
-              </div>
-              {!isPending && (
-                <motion.div
-                  className={cn(
-                    'absolute -bottom-[34px] flex items-center justify-end gap-3',
-                    message.role === 'user'
-                      ? 'right-10 flex-row-reverse'
-                      : 'left-10 flex-row',
-                  )}
-                  variants={actionBar}
-                >
-                  <div className="flex items-center gap-1.5">
-                    {message.role === 'user' && !disabledEdit && (
-                      <TooltipProvider delayDuration={0}>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <button
-                              className={cn(
-                                'text-text-secondary flex h-7 w-7 items-center justify-center rounded-lg border border-gray-200 bg-transparent transition-colors hover:bg-gray-300 hover:text-white [&>svg]:h-3 [&>svg]:w-3',
-                              )}
-                              onClick={() => {
-                                setEditing(true);
-                              }}
-                            >
-                              <Edit3 />
-                            </button>
-                          </TooltipTrigger>
-                          <TooltipPortal>
-                            <TooltipContent>
-                              <p>{t('common.editMessage')}</p>
-                            </TooltipContent>
-                          </TooltipPortal>
-                        </Tooltip>
-                      </TooltipProvider>
-                    )}
-                    {message.role === 'assistant' && !disabledRetry && (
-                      <TooltipProvider delayDuration={0}>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <button
-                              className={cn(
-                                'text-text-secondary flex h-7 w-7 items-center justify-center rounded-lg border border-gray-200 bg-transparent transition-colors hover:bg-gray-300 hover:text-white [&>svg]:h-3 [&>svg]:w-3',
-                              )}
-                              onClick={handleRetryMessage}
-                            >
-                              <RotateCcw />
-                            </button>
-                          </TooltipTrigger>
-                          <TooltipPortal>
-                            <TooltipContent>
-                              <p>{t('common.retry')}</p>
-                            </TooltipContent>
-                          </TooltipPortal>
-                        </Tooltip>
-                      </TooltipProvider>
-                    )}
-                    <TooltipProvider delayDuration={0}>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <div>
-                            <CopyToClipboardIcon
-                              className={cn(
-                                'text-text-secondary h-7 w-7 border border-gray-200 bg-transparent hover:bg-gray-300 [&>svg]:h-3 [&>svg]:w-3',
-                              )}
-                              string={extractErrorPropertyOrContent(
-                                message.content,
-                                'error_message',
-                              )}
-                            />
-                          </div>
-                        </TooltipTrigger>
-                        <TooltipPortal>
-                          <TooltipContent>
-                            <p>{t('common.copy')}</p>
-                          </TooltipContent>
-                        </TooltipPortal>
-                      </Tooltip>
-                    </TooltipProvider>
-                  </div>
-                  <div
-                    className={cn(
-                      'text-text-secondary flex items-center gap-1.5 text-xs',
-                    )}
-                  >
-                    <span>
-                      {format(new Date(message?.createdAt ?? ''), 'p')}
-                    </span>
-                    {message.role === 'assistant' && message?.metadata?.tps && (
-                      <>
-                        {' '}
-                        ⋅
-                        <span>
-                          {Math.round(Number(message?.metadata?.tps) * 10) / 10}{' '}
-                          tokens/s
-                        </span>
-                      </>
-                    )}
-                  </div>
-                </motion.div>
-              )}
-            </Fragment>
-          )}
-        </div>
-      </div>
-    </motion.div>
-  );
-};
-
-export const Message = memo(
-  MessageBase,
-  (prev, next) =>
-    prev.messageId === next.messageId &&
-    prev.message.content === next.message.content &&
-    prev.artifacts?.length === next.artifacts?.length &&
-    prev.artifact === next.artifact,
-);
-
-const variants = {
-  initial: { opacity: 0, y: -25 },
-  visible: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: 25 },
-};
-
-export function ToolCard({
-  name,
-  // args,
-  status,
-  toolRouterKey,
-}: {
-  args: ToolArgs;
-  status: ToolStatusType;
-  name: string;
-  toolRouterKey: string;
-}) {
-  const renderStatus = () => {
-    if (status === ToolStatusType.Complete) {
-      return <ToolsIcon className="text-brand size-full" />;
-    }
-    if (status === ToolStatusType.Incomplete) {
-      return <XCircle className="text-text-secondary size-full" />;
-    }
-    if (status === ToolStatusType.RequiresAction) {
-      return <InfoCircleIcon className="text-text-secondary size-full" />;
-    }
-    return <Loader2 className="text-brand size-full animate-spin" />;
-  };
-
-  const renderLabelText = () => {
-    if (status === ToolStatusType.Complete) {
-      return 'Tool Used';
-    }
-    if (status === ToolStatusType.Incomplete) {
-      return 'Incomplete';
-    }
-    if (status === ToolStatusType.RequiresAction) {
-      return 'Requires Action';
-    }
-    return 'Processing Tool';
-  };
-
-  return (
-    <AnimatePresence initial={false} mode="popLayout">
-      <motion.div
-        animate="visible"
-        exit="exit"
-        initial="initial"
-        transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
-        variants={variants}
-      >
-        <div className="flex items-center gap-1 p-[5px]">
-          <div className="size-7 shrink-0 px-1.5">{renderStatus()}</div>
-          <div className="flex items-center gap-1">
-            <span className="text-text-secondary text-em-sm">
-              {renderLabelText()}
-            </span>
-            <Link
-              className="text-gray-white text-em-sm font-semibold hover:underline"
-              to={`/tools/${toolRouterKey}`}
-            >
-              {formatText(name)}
-            </Link>
-          </div>
-        </div>
-      </motion.div>
-    </AnimatePresence>
-  );
-}