@lobehub/chat 0.50.0 → 0.52.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.52.0](https://github.com/lobehub/lobe-chat/compare/v0.51.0...v0.52.0)
+
+<sup>Released on **2023-08-15**</sup>
+
+#### ✨ Features
+
+- **misc**: Add avatar compress.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add avatar compress ([1325b40](https://github.com/lobehub/lobe-chat/commit/1325b40))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.51.0](https://github.com/lobehub/lobe-chat/compare/v0.50.0...v0.51.0)
+
+<sup>Released on **2023-08-15**</sup>
+
+#### ✨ Features
+
+- **misc**: Add Footer component and modify Token and index files.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add Footer component and modify Token and index files ([41a3823](https://github.com/lobehub/lobe-chat/commit/41a3823))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.50.0](https://github.com/lobehub/lobe-chat/compare/v0.49.0...v0.50.0)
 
 <sup>Released on **2023-08-15**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/features/AvatarWithUpload/index.tsx

@@ -23,15 +23,47 @@ const useStyle = createStyles(
 );
 
 interface AvatarWithUploadProps {
+  compressSize?: number;
   size?: number;
 }
 
-const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40 }) => {
+const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize = 128 }) => {
   const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
   const { styles } = useStyle();
 
   const handleUploadAvatar = createUploadImageHandler((avatar) => {
-    setSettings({ avatar });
+    const img = new Image();
+    img.src = avatar;
+    img.addEventListener('load', () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+      let startX = 0;
+      let startY = 0;
+
+      if (img.width > img.height) {
+        startX = (img.width - img.height) / 2;
+      } else {
+        startY = (img.height - img.width) / 2;
+      }
+
+      canvas.width = compressSize;
+      canvas.height = compressSize;
+
+      ctx.drawImage(
+        img,
+        startX,
+        startY,
+        Math.min(img.width, img.height),
+        Math.min(img.width, img.height),
+        0,
+        0,
+        compressSize,
+        compressSize,
+      );
+
+      const webpBase64 = canvas.toDataURL('image/webp');
+      setSettings({ avatar: webpBase64 });
+    });
   });
 
   return (

package/src/locales/default/common.ts

@@ -80,4 +80,5 @@ export default {
   },
   updateAgent: '更新助理信息',
   updatePrompt: '更新提示词',
+  warp: '换行',
 };

package/src/pages/chat/features/Conversation/Input/Footer.tsx

@@ -0,0 +1,49 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import { useTheme } from 'antd-style';
+import { ArrowBigUp, CornerDownLeft, LucideGalleryVerticalEnd } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+export interface FooterProps {
+  hasTopic: boolean;
+  saveToTopic: () => void;
+}
+
+const Footer = memo<FooterProps>(({ hasTopic, saveToTopic }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('common');
+
+  const saveTopic = hasTopic ? null : (
+    <Tooltip title={t('topic.saveCurrentMessages')}>
+      <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} onClick={saveToTopic} />
+    </Tooltip>
+  );
+
+  const footerTooltip = (
+    <Flexbox
+      gap={4}
+      horizontal
+      style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
+    >
+      <Icon icon={CornerDownLeft} />
+      <span>{t('send')}</span>
+      <span>/</span>
+      <Flexbox horizontal>
+        <Icon icon={ArrowBigUp} />
+        <Icon icon={CornerDownLeft} />
+      </Flexbox>
+      <span>{t('warp')}</span>
+    </Flexbox>
+  );
+
+  return (
+    <>
+      {footerTooltip}
+      {saveTopic}
+    </>
+  );
+});
+
+export default Footer;

package/src/pages/chat/features/Conversation/Input/Token.tsx

@@ -22,6 +22,7 @@ const Token = memo<{ input: string }>(({ input }) => {
     <Tooltip placement={'bottom'} title={t('tokenDetail', { chatsToken, systemRoleToken })}>
       <TokenTag
         maxValue={ModelTokens[model]}
+        style={{ marginLeft: 8 }}
         text={{
           overload: t('tokenTag.overload'),
           remained: t('tokenTag.remained'),

package/src/pages/chat/features/Conversation/Input/index.tsx

@@ -1,6 +1,4 @@
-import { ChatInputArea, DraggablePanel, Icon, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
-import { LucideGalleryVerticalEnd } from 'lucide-react';
+import { ChatInputArea, DraggablePanel } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,6 +8,7 @@ import { useSessionStore } from '@/store/session';
 
 import InputActions from './Action';
 import ActionsRight from './ActionRight';
+import Footer from './Footer';
 import Token from './Token';
 
 const ChatInput = () => {
@@ -31,12 +30,6 @@ const ChatInput = () => {
     ],
   );
 
-  const footer = hasTopic ? null : (
-    <Tooltip title={t('topic.saveCurrentMessages')}>
-      <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} onClick={saveToTopic} />
-    </Tooltip>
-  );
-
   return (
     <DraggablePanel
       expandable={false}
@@ -63,7 +56,7 @@ const ChatInput = () => {
         }
         actionsRight={<ActionsRight />}
         expand={expand}
-        footer={footer}
+        footer={<Footer hasTopic={hasTopic} saveToTopic={saveToTopic} />}
         loading={isLoading}
         minHeight={CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}