mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-21 09:46:12 +01:00
refactor: move arrow svgs out to their own component
This commit is contained in:
Dustin Healy
parent
14aedac1e1
commit
1745708418
5 changed files with 52 additions and 85 deletions
|
|
@ -1,3 +1,4 @@
|
|||
import { ArrowIcon } from '@librechat/client';
|
||||
import type { TConversationCosts } from 'librechat-data-provider';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
|
|
@ -21,20 +22,7 @@ export default function CostBar({ conversationCosts, showCostBar }: CostBarProps
|
|||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M11.293 5.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L13 8.414V18a1 1 0 1 1-2 0V8.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l5-5Z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<ArrowIcon direction="up" />
|
||||
{conversationCosts.totals.prompt.tokenCount}t
|
||||
</div>
|
||||
<div>${Math.abs(conversationCosts.totals.prompt.usd).toFixed(6)}</div>
|
||||
|
|
@ -45,20 +33,7 @@ export default function CostBar({ conversationCosts, showCostBar }: CostBarProps
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12.707 18.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L11 15.586V6a1 1 0 1 1 2 0v9.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-5 5Z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<ArrowIcon direction="down" />
|
||||
{conversationCosts.totals.completion.tokenCount}t
|
||||
</div>
|
||||
<div>${Math.abs(conversationCosts.totals.completion.usd).toFixed(6)}</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useCallback, useMemo, memo } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { ArrowIcon } from '@librechat/client';
|
||||
import { type TMessage, TConversationCosts } from 'librechat-data-provider';
|
||||
import type { TMessageProps, TMessageIcon } from '~/common';
|
||||
import MessageContent from '~/components/Chat/Messages/Content/MessageContent';
|
||||
|
|
@ -178,35 +179,9 @@ const MessageRender = memo(
|
|||
{perMessageCost.tokenCount > 0 && (
|
||||
<span>
|
||||
{perMessageCost.tokenType === 'prompt' ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M11.293 5.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L13 8.414V18a1 1 0 1 1-2 0V8.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l5-5Z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<ArrowIcon direction="up" className="inline" />
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12.707 18.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L11 15.586V6a1 1 0 1 1 2 0v9.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-5 5Z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<ArrowIcon direction="down" className="inline" />
|
||||
)}
|
||||
{perMessageCost.tokenCount}t
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { ArrowIcon } from '@librechat/client';
|
||||
import { useCallback, useMemo, memo } from 'react';
|
||||
import type { TMessage, TMessageContentParts, TConversationCosts } from 'librechat-data-provider';
|
||||
import type { TMessageProps, TMessageIcon } from '~/common';
|
||||
|
|
@ -64,7 +65,6 @@ const ContentRender = memo(
|
|||
});
|
||||
const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
|
||||
const fontSize = useRecoilValue(store.fontSize);
|
||||
const convoId = conversation?.conversationId ?? '';
|
||||
|
||||
const perMessageCost = useMemo(() => {
|
||||
if (!costs || !costs.perMessage || !msg?.messageId) {
|
||||
|
|
@ -176,35 +176,9 @@ const ContentRender = memo(
|
|||
{perMessageCost.tokenCount > 0 && (
|
||||
<span className="mr-2">
|
||||
{perMessageCost.tokenType === 'prompt' ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M11.293 5.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L13 8.414V18a1 1 0 1 1-2 0V8.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l5-5Z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<ArrowIcon direction="up" className="inline" />
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12.707 18.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L11 15.586V6a1 1 0 1 1 2 0v9.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-5 5Z"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<ArrowIcon direction="down" className="inline" />
|
||||
)}
|
||||
{perMessageCost.tokenCount}t
|
||||
</span>
|
||||
|
|
|
|||
42
packages/client/src/svgs/ArrowIcon.tsx
Normal file
42
packages/client/src/svgs/ArrowIcon.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
interface ArrowIconProps {
|
||||
direction: 'up' | 'down';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function ArrowIcon({ direction, className = 'inline' }: ArrowIconProps) {
|
||||
if (direction === 'up') {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M11.293 5.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L13 8.414V18a1 1 0 1 1-2 0V8.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l5-5Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12.707 18.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L11 15.586V6a1 1 0 1 1 2 0v9.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-5 5Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export { default as ArchiveIcon } from './ArchiveIcon';
|
||||
export { default as ArrowIcon } from './ArrowIcon';
|
||||
export { default as Blocks } from './Blocks';
|
||||
export { default as Plugin } from './Plugin';
|
||||
export { default as GPTIcon } from './GPTIcon';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue