feat: show history list under the command bar and fix logic

src/app/constants.ts

@@ -4,7 +4,7 @@ import {
  faTimes,
 } from '@fortawesome/free-solid-svg-icons'
 import { faChevronsLeft } from '@fortawesome/pro-regular-svg-icons'
-import { setChatOpen, toggleChatHistory } from '../features/chat/chatSlice'
+import { setChatHistoryOpen, setChatOpen, toggleChatHistory } from '../features/chat/chatSlice'
 import { store } from './store'
 
 export type Tip = [string, string, IconDefinition, () => void]
@@ -25,4 +25,10 @@ export const ActionTips: ActionTipsInterface = {
  faChevronsLeft,
  () => store.dispatch(toggleChatHistory()),
  ],
+ CLOSE_HISTORY_DIRECTLY: [
+ 'Close History Directly',
+ '',
+ faTimes,
+ () => store.dispatch(setChatHistoryOpen(false))
+ ]
 }

src/components/markdown.tsx

@@ -53,6 +53,11 @@ import ReactTextareaAutocomplete from '@webscopeio/react-textarea-autocomplete'
 
 import Modal from 'react-modal'
 
+export enum historyPosition {
+ COMMAND_BAR = 'COMMAND_BAR',
+ CHAT_POPUP ='CHAT_POPUP'
+}
+
 export function PreBlock({ children }: { children: ReactNode | ReactNode[] }) {
  function getResult(child: ReactNode) {
  if (React.isValidElement(child)) {
@@ -330,7 +335,7 @@ export function ChatPopup() {
 
  function handleMouseDown() {
  if (document.activeElement) {
- ;(document.activeElement as HTMLElement).blur()
+ (document.activeElement as HTMLElement).blur()
  }
  }
  return (
@@ -370,7 +375,9 @@ export function ChatPopup() {
  </div>
  </div>
  {isChatHistoryOpen && (
- <ChatHistory onSelect={handleSelectHistory} />
+ <div className='w-80' > 
+ <ChatHistory onSelect={handleSelectHistory}/>
+ </div>
  )}
  </div>
  )}
@@ -781,18 +788,30 @@ function formatPromptPreview(prompt: string): string {
 function ChatHistory(props: {
  onSelect?: (id: string) => void
  onClose?: () => void
+ position?: historyPosition
+
 }) {
+ const { onSelect, position = historyPosition.CHAT_POPUP } = props
  const conversationIds = useAppSelector(csel.getConversationIds)
  const conversationPrompts = useAppSelector(
  csel.getConversationPrompts(conversationIds, 'reverse')
  )
 
+ const tips = useMemo(() => {
+ switch(position) {
+ case historyPosition.CHAT_POPUP: return ActionTips.CLOSE_HISTORY
+ case historyPosition.COMMAND_BAR: return ActionTips.CLOSE_HISTORY_DIRECTLY
+ default: return ActionTips.CLOSE_HISTORY
+ }
+ } ,[])
+
  return (
- <div className="flex flex-col items-center w-80 select-none">
- <button className="w-full" onClick={props.onClose}>
+ <div className="flex flex-col items-center select-none mt-2.5 h-full">
+ {/* <button className="w-full" onClick={props.onClose}> */}
+ <button className="w-full">
  <CommandBarActionTips
  align="right"
- tips={[ActionTips.CLOSE_HISTORY]}
+ tips={[tips]}
  />
  </button>
  <div className="flex flex-col w-full items-center space-y-1 mt-1 overflow-auto">
@@ -801,7 +820,7 @@ function ChatHistory(props: {
  <button
  key={msg.conversationId}
  className="w-full bg-neutral-600 rounded-sm px-4 py-2"
- onClick={() => props.onSelect?.(msg.conversationId)}
+ onClick={() => onSelect?.(msg.conversationId)}
  >
  <div
  className={
@@ -830,6 +849,15 @@ export function CommandBar({
 }) {
  const dispatch = useAppDispatch()
 
+ const handleSelectHistory = (id: string) => {
+ dispatch(cs.toggleChatHistory())
+ dispatch(cs.setCurrentConversation(id))
+
+ }
+ const msgType = useAppSelector(csel.getMsgType)
+ const isChatHistoryOpen = useAppSelector<boolean>(csel.getHistoryStatus)
+
+
  const customStyles = {
  overlay: {
  backgroundColor: 'rgba(0, 0, 0, 0.1)',
@@ -854,7 +882,7 @@ export function CommandBar({
  }
 
  const commandBarOpen = useAppSelector(csel.getIsCommandBarOpen)
- const isChatHistoryAvailable = useAppSelector(
+ const _isChatHistoryAvailable = useAppSelector(
  csel.getIsChatHistoryAvailable
  )
 
@@ -869,7 +897,7 @@ export function CommandBar({
  style={customStyles}
  >
  <div className="tipArea">
- Previous
+ For Chat History Using
  <div className="tipKeyCommand">
  Ctrl+Shift+
  <FontAwesomeIcon icon={faArrowUp} />
@@ -882,6 +910,9 @@ export function CommandBar({
  </div>
  </div>
  </div>
+ {isChatHistoryOpen && msgType === 'freeform' && <div className='h-96' >
+ <ChatHistory onSelect={handleSelectHistory} position={historyPosition.COMMAND_BAR} />
+ </div>}
  </Modal>
  ) : (
  <div className="commandBar__container">

src/features/chat/chatSelectors.ts

@@ -158,3 +158,5 @@ export const getIsChatHistoryAvailable = createSelector(
 export const getFireCommandK = (state: FullState) =>
  state.chatState.fireCommandK
 export const getMsgType = (state: FullState) => state.chatState.msgType
+
+export const getHistoryStatus = (state: FullState) => state.chatState.chatHistoryIsOpen

src/features/chat/chatSlice.ts

@@ -320,6 +320,7 @@ export const chatSlice = createSlice({
  openCommandBar(chatState: ChatState) {
  chatState.isCommandBarOpen = true
  chatState.chatIsOpen = false
+ chatState.chatHistoryIsOpen = true
  const newConversationId = uuidv4()
 
  chatState.currentConversationId = newConversationId
@@ -525,19 +526,24 @@ export const chatSlice = createSlice({
  chatState.commandBarHistoryIndex
 
  const historyMessage = chatState.userMessages.at(index)
+ const currentConversationId = chatState.currentConversationId
+ const currentDraftMessage =
+ chatState.draftMessages[currentConversationId]
  if (historyMessage) {
  // chatState.currentConversationId = historyMessage.conversationId
- const currentConversationId = chatState.currentConversationId
- const currentDraftMessage =
- chatState.draftMessages[currentConversationId]
  currentDraftMessage.message = historyMessage.message
+ } else {
+ currentDraftMessage.message = ''
  }
  // if (historyMessage) {
  // chatState.commandBarText = historyMessage.message
  // } else {
  // chatState.commandBarText = ''
  // }
  },
+ setChatHistoryOpen(chatState: ChatState, action: PayloadAction<boolean>) {
+ chatState.chatHistoryIsOpen = action.payload
+ },
  },
 })
 
@@ -577,4 +583,5 @@ export const {
  _submitCommandBar: dummySubmitCommandBar,
  // Bad - I added tech debt and will fix later
  setMaxOrigLine,
+ setChatHistoryOpen
 } = chatSlice.actions

src/index.css

@@ -2445,8 +2445,8 @@ free servers .disabled_command .shortcut__block {
 
 .tipArea {
  display: flex;
- color: #999;
- font-size: 12px;
+ color: #b3b2b2;
+ font-size: 14px;
  align-items: center;
  margin-bottom: 4px;
 }
@@ -2456,7 +2456,7 @@ free servers .disabled_command .shortcut__block {
  background-color: #444;
  padding: 2px;
  border-radius: 2px;
- font-size: 10px;
+ font-size: 14px;
 }
 
 .leftDrag {
@@ -2583,4 +2583,4 @@ free servers .disabled_command .shortcut__block {
 
 .markdownpopup p {
  margin: 12px 0px;
-}
+}