legends810/testingnew

1import { useStore } from '@nanostores/react';2import { TooltipProvider } from '@radix-ui/react-tooltip';3import WithTooltip from '~/components/ui/Tooltip';4import { useEditChatDescription } from '~/lib/hooks';5import { description as descriptionStore } from '~/lib/persistence';6 7export function ChatDescription() {8  const initialDescription = useStore(descriptionStore)!;9 10  const { editing, handleChange, handleBlur, handleSubmit, handleKeyDown, currentDescription, toggleEditMode } =11    useEditChatDescription({12      initialDescription,13      syncWithGlobalStore: true,14    });15 16  if (!initialDescription) {17    // doing this to prevent showing edit button until chat description is set18    return null;19  }20 21  return (22    <div className="flex items-center justify-center">23      {editing ? (24        <form onSubmit={handleSubmit} className="flex items-center justify-center">25          <input26            type="text"27            className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 mr-2 w-fit"28            autoFocus29            value={currentDescription}30            onChange={handleChange}31            onBlur={handleBlur}32            onKeyDown={handleKeyDown}33            style={{ width: `${Math.max(currentDescription.length * 8, 100)}px` }}34          />35          <TooltipProvider>36            <WithTooltip tooltip="Save title">37              <div className="flex justify-between items-center p-2 rounded-md bg-bolt-elements-item-backgroundAccent">38                <button39                  type="submit"40                  className="i-ph:check-bold scale-110 hover:text-bolt-elements-item-contentAccent"41                  onMouseDown={handleSubmit}42                />43              </div>44            </WithTooltip>45          </TooltipProvider>46        </form>47      ) : (48        <>49          {currentDescription}50          <TooltipProvider>51            <WithTooltip tooltip="Rename chat">52              <div className="flex justify-between items-center p-2 rounded-md bg-bolt-elements-item-backgroundAccent ml-2">53                <button54                  type="button"55                  className="i-ph:pencil-fill scale-110 hover:text-bolt-elements-item-contentAccent"56                  onClick={(event) => {57                    event.preventDefault();58                    toggleEditMode();59                  }}60                />61              </div>62            </WithTooltip>63          </TooltipProvider>64        </>65      )}66    </div>67  );68}69