import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

/* backstory/src/utils/message.py */
type Tunables = {
  enable_rag?: boolean,
  enable_tools?: boolean,
  enable_context?: boolean,
};

/* backstory/src/server.py */
type Query = {
  prompt: string,
  tunables?: Tunables,
  agent_options?: {},
};

type ChatSubmitQueryInterface = (query: Query) => void;

interface ChatQueryInterface {
  query: Query,
  submitQuery?: ChatSubmitQueryInterface
}

const ChatQuery = (props : ChatQueryInterface) => {
  const { query, submitQuery } = props;

  if (submitQuery === undefined) {
    return (<Box>{query.prompt}</Box>);
  }
  return (
    <Button variant="outlined" sx={{
      color: theme => theme.palette.custom.highlight, // Golden Ochre (#D4A017)
      borderColor: theme => theme.palette.custom.highlight,
      m: 1
    }}
      size="small" onClick={(e: any) => { submitQuery(query); }}>
      {query.prompt}
    </Button>
  );
}

export type {
  ChatQueryInterface,
  Query,
  ChatSubmitQueryInterface,
};

export  {
  ChatQuery,
};