@servicetitan/assist-ui
Version:
ServiceTitan Atlas UI Components
181 lines (180 loc) • 9.18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from 'react';
import classNames from 'classnames';
import { observer } from 'mobx-react';
import { Badge, Button, Flex, Icon, OverflowText, Text, Tooltip } from '@servicetitan/anvil2';
import IconArrowBackIos from '@servicetitan/anvil2/assets/icons/material/round/arrow_back_ios.svg';
import IconClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
import IconDragIndicator from '@servicetitan/anvil2/assets/icons/material/round/drag_indicator.svg';
import IconInbox from '@servicetitan/anvil2/assets/icons/material/round/inbox.svg';
import IconModeEdit from '@servicetitan/anvil2/assets/icons/material/round/mode_edit.svg';
import IconOpenInFull from '@servicetitan/anvil2/assets/icons/material/round/open_in_full.svg';
import * as styles from './header.module.less';
export const Header = observer(({ title = 'Atlas', onMouseDown, isDraggable, isDragging, onFullscreen, onViewHistory, isExpanded, historyCount, titleBadge, disabledChatsIcon, onClose, onBack, className = '', onCreateNewChat, backButtonId, viewHistoryButtonId, fullscreenButtonId, newChatButtonId, closeButtonId })=>{
return /*#__PURE__*/ _jsxs(Flex, {
className: classNames(styles.chatHeader, className),
children: [
/*#__PURE__*/ _jsxs(Flex, {
gap: 1,
className: "m-inline-end-1",
children: [
isDraggable && !isExpanded && /*#__PURE__*/ _jsx(Flex, {
alignSelf: "center",
style: {
cursor: isDragging ? 'grabbing' : 'grab'
},
onMouseDown: onMouseDown !== null && onMouseDown !== void 0 ? onMouseDown : undefined,
className: "cursor-grab",
children: /*#__PURE__*/ _jsxs(Tooltip, {
placement: "bottom",
children: [
/*#__PURE__*/ _jsx(Tooltip.Trigger, {
children: /*#__PURE__*/ _jsx(Icon, {
svg: IconDragIndicator,
size: "medium",
inherit: true
})
}),
isDragging ? null : /*#__PURE__*/ _jsx(Tooltip.Content, {
children: "Drag to Adjust"
})
]
})
}),
onBack && /*#__PURE__*/ _jsx(Button, {
id: backButtonId,
appearance: "ghost",
size: "small",
icon: IconArrowBackIos,
onClick: onBack
})
]
}),
/*#__PURE__*/ _jsx(Flex, {
grow: 1,
children: /*#__PURE__*/ _jsxs(Tooltip, {
placement: "bottom",
children: [
/*#__PURE__*/ _jsx(Tooltip.Trigger, {
children: /*#__PURE__*/ _jsxs(OverflowText, {
rows: 1,
className: styles.chatHeaderTitle,
children: [
/*#__PURE__*/ _jsx(Text, {
el: "h4",
size: "small",
variant: "headline",
className: "m-block-end-0 p-block-end-0",
children: title
}),
!!titleBadge && /*#__PURE__*/ _jsx(Badge, {
offset: {
x: '12px',
y: '0.7rem'
},
children: titleBadge
})
]
})
}),
/*#__PURE__*/ _jsx(Tooltip.Content, {
children: title
})
]
})
}),
/*#__PURE__*/ _jsxs(Flex, {
gap: 1,
children: [
onViewHistory && /*#__PURE__*/ _jsxs(Tooltip, {
placement: "bottom",
children: [
/*#__PURE__*/ _jsx(Tooltip.Trigger, {
style: {
position: 'relative'
},
children: /*#__PURE__*/ _jsxs(Fragment, {
children: [
/*#__PURE__*/ _jsx(Button, {
id: viewHistoryButtonId,
style: {
position: 'relative'
},
disabled: disabledChatsIcon,
appearance: "ghost",
size: "small",
icon: IconInbox,
"aria-label": "chats",
onClick: onViewHistory
}),
!!historyCount && /*#__PURE__*/ _jsx(Badge, {
children: historyCount
})
]
})
}),
/*#__PURE__*/ _jsx(Tooltip.Content, {
children: "View All Chats"
})
]
}),
onFullscreen && /*#__PURE__*/ _jsxs(Tooltip, {
placement: "bottom",
children: [
/*#__PURE__*/ _jsx(Tooltip.Trigger, {
children: /*#__PURE__*/ _jsx(Button, {
id: fullscreenButtonId,
appearance: "ghost",
size: "small",
icon: IconOpenInFull,
"aria-label": "fullscreen",
onClick: onFullscreen
})
}),
/*#__PURE__*/ _jsx(Tooltip.Content, {
children: isExpanded ? 'Minimize Window' : 'Expand Window'
})
]
}),
onCreateNewChat && /*#__PURE__*/ _jsxs(Tooltip, {
placement: "bottom",
children: [
/*#__PURE__*/ _jsx(Tooltip.Trigger, {
children: /*#__PURE__*/ _jsx(Button, {
id: newChatButtonId,
size: "small",
icon: IconModeEdit,
"aria-label": "new chat",
onClick: onCreateNewChat,
children: "New Chat"
})
}),
/*#__PURE__*/ _jsx(Tooltip.Content, {
children: "New Chat"
})
]
}),
onClose && /*#__PURE__*/ _jsxs(Tooltip, {
placement: "bottom",
children: [
/*#__PURE__*/ _jsx(Tooltip.Trigger, {
children: /*#__PURE__*/ _jsx(Button, {
id: closeButtonId,
appearance: "ghost",
size: "small",
icon: IconClose,
"aria-label": "close",
onClick: onClose
})
}),
/*#__PURE__*/ _jsx(Tooltip.Content, {
children: "Hide Window"
})
]
})
]
})
]
});
});
//# sourceMappingURL=header.js.map