| 1 |
import { arrow } from '@help-center/components/ai-chat/icons'; |
| 2 |
import { useAIChatStore } from '@help-center/state/ai-chat'; |
| 3 |
import { useEffect } from '@wordpress/element'; |
| 4 |
import { __ } from '@wordpress/i18n'; |
| 5 |
import { close, Icon } from '@wordpress/icons'; |
| 6 |
|
| 7 |
export const History = ({ setShowHistory }) => { |
| 8 |
const { history, setCurrentQuestion, deleteFromHistory } = useAIChatStore(); |
| 9 |
|
| 10 |
useEffect(() => { |
| 11 |
if (history.length > 0) return; |
| 12 |
// They cleared all the history |
| 13 |
setTimeout(() => setShowHistory(false), 750); |
| 14 |
}, [history, setShowHistory]); |
| 15 |
|
| 16 |
return ( |
| 17 |
<div className="relative h-full"> |
| 18 |
<div className="flex items-center justify-between bg-gray-100 p-4 px-6 text-gray-900"> |
| 19 |
<h1 className="m-0 p-0 text-sm font-medium"> |
| 20 |
{__('Chat History', 'extendify-local')} |
| 21 |
</h1> |
| 22 |
<button |
| 23 |
type="button" |
| 24 |
onClick={() => setShowHistory(false)} |
| 25 |
className="m-0 border-0 bg-transparent fill-current p-0 text-design-text" |
| 26 |
> |
| 27 |
<Icon icon={close} size={16} /> |
| 28 |
<span className="sr-only"> |
| 29 |
{__('Close history', 'extendify-local')} |
| 30 |
</span> |
| 31 |
</button> |
| 32 |
</div> |
| 33 |
<ul className="m-0 mt-3 h-full overflow-y-auto p-0"> |
| 34 |
{[...history] |
| 35 |
.sort((a, b) => a.time - b.time) |
| 36 |
.map((item) => ( |
| 37 |
<li |
| 38 |
key={item.answerId} |
| 39 |
className="group flex gap-1 px-2 pr-4 rtl:flex-row-reverse" |
| 40 |
> |
| 41 |
<button |
| 42 |
type="button" |
| 43 |
onClick={() => deleteFromHistory(item)} |
| 44 |
className="m-0 border-0 bg-transparent p-0 opacity-0 group-hover:opacity-100" |
| 45 |
> |
| 46 |
<Icon icon={close} size={12} /> |
| 47 |
<span className="sr-only"> |
| 48 |
{__('Remove from history', 'extendify-local')} |
| 49 |
</span> |
| 50 |
</button> |
| 51 |
<button |
| 52 |
type="button" |
| 53 |
className="m-0 flex w-full items-center justify-between gap-2 rounded-md border border-gray-200 bg-transparent p-2.5 text-left hover:bg-gray-100" |
| 54 |
onClick={() => setCurrentQuestion(item)} |
| 55 |
> |
| 56 |
<div> |
| 57 |
<span className="overflow-hidden truncate text-ellipsis"> |
| 58 |
{item.question.substring(0, 100)} |
| 59 |
</span> |
| 60 |
</div> |
| 61 |
<span> |
| 62 |
<Icon |
| 63 |
className="fill-current text-gray-900 rtl:rotate-180" |
| 64 |
icon={arrow} |
| 65 |
/> |
| 66 |
</span> |
| 67 |
</button> |
| 68 |
</li> |
| 69 |
))} |
| 70 |
</ul> |
| 71 |
</div> |
| 72 |
); |
| 73 |
}; |
| 74 |
|
